为什么子元素继承父不透明度？答案

【问题标题】：Why is child element inheriting parent opacity?为什么子元素继承父不透明度？
【发布时间】：2014-03-17 20:50:58
【问题描述】：

一个简单的问题（我希望），这让我感到困惑。我有一个模态窗口的叠加层，将不透明度设置为 .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（背景应该是纯白色，不能混色）。我做错了什么？

【问题讨论】：

我不知道子元素继承了父元素
这是JSFiddle
@Vucko，几乎有效。这只是我整个事情的一个 sn-p（足以重现），但模态不是不透明的，但现在覆盖也不是。

标签： html css modal-dialog opacity

【解决方案1】：

不透明度由子元素 AFAIK 继承。为什么不尝试使用：

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

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

【讨论】：

把不透明度改成那个。