CODEWITHSUNDEEP
csshtmlopacity
Andy
Andy

Reputation: 1432

Div style inheritance issue

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.

Upvotes: 1

Views: 194

Answers (3)

peduarte
peduarte

Reputation: 1677

There's no way you can do that man.

Two solutions, if it's just the background color, you could:

  1. Use a transparent .png image

  2. use rgba. E.g, for black with 60% transparency: background-color: rgba(0, 0, 0, .6);

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382626

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:

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

Upvotes: 1

scottheckel
scottheckel

Reputation: 9244

That's not possible. The opacity will be applied to everything within. See the spec for more information.

Upvotes: -1

Related Questions