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

Question

标题几乎不言自明（而且令人惊讶？）

我有 3 层 :

背景图片
透明div
非透明 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;
}

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

CSS:: Second layer of solid non transparent background on top of transparent background is not working?

html

css

image

filter

opacity