Sử dụng độ mờ đục phù hợp với các DIV lồng nhau?

Question

Vì vậy, tôi đang cố gắng tạo ra một lightbox như cảm thấy. Tôi đã tạo một div #blackout và một số #enlargedBOX div.

Giá trị độ mờ làdiv là 90%, vì tôi muốn trang web nền hiển thị qua một chút, tuy nhiên tôi KHÔNG muốn div #enlargedBOX của mình sử dụng cùng độ mờ đó. Có vẻ như là #blackout buộc độ mờ của chính nó vào bất cứ thứ gì bên trong chính nó. Làm thế nào tôi có thể ngăn chặn điều đó?

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

Dưới đây là một jsFiddle

Bạn sẽ thấy rằng nền RED thể hiện qua trên trắng #enlargedBOX div.

Answer 1

Chỉ cần sử dụng rgba() - DEMO

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

Answer 2

Lấy hộp thoại enlargedBOX tách ra từ bên trong blackout div lớp phủ nền và cung cấp chỉ số z cao hơn.

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>