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

Question

标题几乎是自我解释的（并且令人惊讶？）

我有3层：

1. 背景图片

2. 透明div

3. 透明div顶部的非透明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中给出的不透明度。

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