正確使用嵌套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的不透明度？

回答

相關問題