Richtige Verwendung der Deckkraft mit verschachtelten DIVs?

Question

Also ich versuche, ein Lightbox-ähnliches Gefühl zu schaffen. Ich habe eine #blackout div und eine #enlargedBOX Div erstellt.

Das #blackout div hat seine Opazität auf 90% eingestellt, weil ich möchte, dass die Hintergrundwebsite nur ein bisschen durchscheint, aber ich möchte nicht, dass mein #enlargedBOX div dieselbe Opazität verwendet. Es scheint, dass #blackout seine eigene Opazität auf etwas in sich selbst drängt. Wie kann ich das stoppen?

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

Hier ist ein jsFiddle

Sie werden sehen, dass die roten Hintergrund auf dem weißen #enlargedBOX div durchscheint.

Answer 1

Verwenden Sie einfach 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

Nehmen Sie die enlargedBOX Dialog Div aus dem blackout Hintergrund Overlay Div, und geben Sie ihm einen höheren 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>