Uso corretto dell'opacità con DIV nidificati?

Question

Quindi sto provando a creare una sensazione simile a lightbox. Ho creato un div #blackout e un div #enlargedBOX.

Il div #blackout ha la sua opacità impostata al 90%, perché voglio che il sito Web di sfondo venga visualizzato solo un po ', tuttavia NON voglio il mio div #enlargedBOX per utilizzare la stessa opacità. Sembra che lo #blackout imponga la propria opacità su qualsiasi cosa al suo interno. Come posso smettere?

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

Ecco un jsFiddle

Vedrai che il fondo rosso mostra attraverso sul bianco #enlargedBOX div.

Answer 1

Basta usare 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

Prendere la finestra di dialogo enlargedBOX div all'interno del div overlay dello sfondo blackout e assegnargli uno z-index più alto.

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>