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; 
}