为什么子元素会继承父元素的不透明度？

Question

简单的问题（希望如此），但我却无法解决... 我有一个用于模态窗口的叠加层，将不透明度设置为.87，但是我的 div 元素似乎继承了该不透明度。

CSS：

body { background-color:black; }
#overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align:center;
    z-index: 99;
    background-color: black;
    opacity:.87;
}

#overlay > div {
    width:300px;
    height:300px;
    margin: 100px auto;
    background-color: #fff;
    border:1px solid #000;
    padding:15px;
    text-align:center;
    opacity:1;
    z-index: 100;
}

HTML：

<div id="overlay">
    <div>some stuff here</div>
</div>

这里有一个fiddle（背景应该是纯白色，而不是混合的）。我做错了什么？

- Sterling Archer

---

我不知道子元素继承了父级元素的属性。 - Sterling Archer

这是 JSFiddle。 - Vucko

@Vucko 那 几乎 可以工作。这只是我整个项目的一部分（足以复制），但模态框不是不透明的，但叠加层现在也不是。 - Sterling Archer

Answer 1

据我所知，透明度会被子元素继承。 为什么不尝试使用以下代码：

background:rgba(0,0,0,.87);

我去掉了黑色背景。 在这里查看：http://jsfiddle.net/zZ57q/3/

- witherwind

---

将不透明度更改为那个。 - witherwind