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

所以我试图创建一个灯箱般的感觉。我创建了一个#blackout div和一个#enlargedBOX div。正确使用嵌套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股利。

来源

2013-02-25 ipixel

只需使用rgba() - DEMO

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

来源

2013-02-25 21:08:52

是啊，我只是意识到使用不透明度：影响子元素和RGBA没有。谢谢！ – ipixel 2013-02-25 21:10:59

欢迎您:) – 2013-02-25 21:11:50

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

来源

2013-02-25 21:06:39 j08691

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

回答

相关问题