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

Question

所以我正在尝试创建一个像感觉一样的灯箱.我创建了一个#blackoutdiv和一个#enlargedBOXdiv.

该#blackoutdiv有它的不透明度设置为90%,是因为我希望背景的网站,通过只是有点表现,但我不希望我的#enlargedBOXdiv来使用相同的不透明度.它似乎#blackout强迫它自己的不透明度本身.我怎么能阻止它？

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

这是一个jsFiddle

你会看到RED背景显示在白色#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);
}