Question

I’m trying to embed one DIV inside another without it inheriting the opacity style of the wrapper DIV.

Style Code :

#outer {
background-color: #000;
width: 400px;
height: 400px;
z-index: 0;
opacity: 1;
}

#inner {
background-color: #000;
width: 200px;
height: 200px;
z-index: 1;
opacity: 0.5;
}

HTML Code :

<div id="outer">
    <div id="inner">
    </div>
</div>

I’ve tried a few different solutions but none have worked as yet.

Answer 1

You can use CSS3s rgba property to solve that problem (Works for colors).

background-color: rgba(0, 0, 0, .7);

If you want to support older browser which do not support CSS3 or rgba property (or when you have images in background), here are links to other possible solutions:

• Non-Transparent Elements Inside Transparent Elements
• CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters

Other cross-browser solution is to use semi-transparent PNGs for your divs.