नेस्टेड डीआईवी के साथ अस्पष्टता का उचित उपयोग?

Question

तो मैं महसूस करने जैसे लाइटबॉक्स बनाने की कोशिश कर रहा हूं। मैंने #blackout div और #enlargedBOX 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 div पर के माध्यम से पता चलता है।

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); 
} 

Answer 2

डायलॉग डिवीजन blackout पृष्ठभूमि ओवरले div के भीतर से बाहर निकालें, और इसे उच्च जेड-इंडेक्स दें।

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>