Question

所以我正在尝试创建一个像感觉一样的灯箱。我创建了一个#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上显示。

Answer 1

从enlargedBOX背景叠加div中取出blackout对话框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>

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

1 个答案: