css - 正确使用嵌套 DIV 的不透明度？

Question

所以我试图创造一个灯箱般的感觉。我创建了一个#blackoutdiv 和一个#enlargedBOXdiv。

div的#blackout不透明度设置为 90%，因为我希望背景网站显示一点，但是我不希望我的#enlargedBOXdiv 使用相同的不透明度。似乎它将#blackout自己的不透明性强加于自身内部的任何事物上。我怎么能阻止它？

<div id="blackout">
<div id="enlargedBOX">
        <img src="" width="500" height="500" border="0" />
    </div>
</div>

这是一个jsFiddle

你会看到红色背景显示在白色#enlargedBOXdiv 上。

Answer 1

只需使用rgba()- DEMO

#blackout {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    overflow:auto;
    z-index:100;
    background: rgba(0, 0, 0, .9);
}

Answer 2

enlargedBOX从背景覆盖 div 中取出对话框 div blackout，并为其设置更高的 z-index。

jsFiddle 示例

#enlargedBOX {
    position:relative;
    z-index:101;
    margin:50px auto;
    padding:0px;
    width:500px;
    height:500px;
    background:#FFF;
    opacity:1;
}

<div id="blackout"></div>
<div id="enlargedBOX">
    <img src="" width="500" height="500" border="0" />
</div>