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（背景应该是纯白色，不是混合的）。我做错了什么？

Answer 1

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

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

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

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

1 个答案: