正确使用嵌套 DIV 的不透明度？ [复制]答案

【问题标题】：Proper use of opacity with nested DIVs? [duplicate]正确使用嵌套 DIV 的不透明度？ [复制]
【发布时间】：2013-02-11 03:46:50
【问题描述】：

所以我正在尝试创建一个灯箱般的感觉。我创建了一个#blackout div 和一个#enlargedBOX div。

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

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

这是jsFiddle

您会看到红色背景在白色 #enlargedBOX div 上显示出来。

【问题讨论】：

标签： css opacity

【解决方案1】：

从blackout背景覆盖div中取出enlargedBOX对话框div，并给它一个更高的z-index。

jsFiddle example

#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>

【讨论】：

【解决方案2】：

只需使用rgba() - DEMO

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

【讨论】：

是的，我刚刚意识到使用 opacity: 会影响子元素而 rgba 不会。谢谢！