Geek asks and answers

Proper use of opacity with nested divs?

So, I'm trying to create a lightbox, for example, to feel. I created a #blackoutdiv and div #enlargedBOX.

#blackoutdiv has 90% transparency because I want the background website to show just a little bit, however I DO NOT want my #enlargedBOXdiv to use the same opacity. It seems to #blackoutmake its opacity to anything within itself. How can i stop this?

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

Here jsFiddle

You will see that the red background is displayed on a white #enlargedBOXdiv.

+5
source share
2 answers

Just use rgba()- DEMO

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

enlargedBOX div blackout background overlay div z.

jsFiddle

#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>
0

More articles:


All Articles