CSS ::透明背景上的第二层实体非透明背景不起作用？

Question

标题是相当多的自我解释

我有3层（和令人惊讶的）：

1. 背景图片

2. 透明的div

3. 不透明上的透明顶部格DIV。

并不十分有益的CSS技巧来解决这个问题：

1. filter: alpha(opacity=100); 

2. opacity: 1; 

3. z-index: 2; 

4. background:url('someSolidWhitePicture.jpg'); 

这里是的jsfiddle： http://jsfiddle.net/gu0ndhbx/

以下是完整的代码示例：

的HTML：

<div id="heziGangina"> 
    <div id="ganginaHezi"> 
    Dummy Text (that should be inside non transparent background)... 
    </div> 
</div> 

的CSS：

body 
{ 
background: url('http://moreimg.com/wp-content/uploads/2015/02/iPhone-Wallpaper-HD-010-640x600.jpg'); 
z-index: 0; 
} 


#heziGangina 
{ 
background: #fff; 
opacity: 0.4; 
filter: alpha(opacity=40); 
width: 100%; 
display: block; 
height: 300px; 
z-index: 1; 
} 

#ganginaHezi 
{ 
background: #fff; 
opacity: 1; 
filter: alpha(opacity=100); 
width: 100px; 
height: 100px; 
margin: 10px auto; 
z-index: 2; 
background: url('http://images.all-free-download.com/images/graphicmedium/plain_white_background_211387.jpg'); 
} 

Answer 1

这是因为在父DIV给出的opacaity的发生。

检查此fiddle。

body{ 
    background:url('http://moreimg.com/wp-content/uploads/2015/02/iPhone-Wallpaper-HD-010-640x600.jpg'); 
    /* z-index:0; */ 
} 


#heziGangina{ 
    background: rgba(255, 255, 255, 0.4); 
width: 100%; 
display: block; 
height: 300px; 
} 

#GanginaHezi{ 
    width: 100px; 
height: 100px; 
margin: 10px auto; 
background: url('http://images.all-free-download.com/images/graphicmedium/plain_white_background_211387.jpg'); 
background-size: 100px; 
}