Is Opacity is INHERITED in a div

Question

Is it possible to remove the opacity inheritance from a parent to it's child div?

Example

<style type="text/css">
.parent {
 opacity:.5;
}
.parent div {
 opacity:1; /* I want this to override the ".5", but instead it combines */
}
</style>
<div class="parent"><div></div></div>

Answer 1

Like fmsf says, it's not possible. If you're looking for a way to make background-color or color transparent, you could try rgba. This is not supported in IE6.

#my_element {
  /* ie6 fallback - no opacity */
  background-color:rgb(255, 255, 255);

  /* rgba(red, green, blue, alpha); */
  background-color:rgba(255,255,255,0.5);
}

Answer 2

No, not strictly in the sense you're inquiring about. Because what's happening is not really that the value is inherited in any traditional sense, but the child control is part transparent as a direct effect of being within a partly transparent container.

You can work around it, tho, in a lot of situations.

So this won't work:

<div id="parent" style="opacity: 0.5; background-color: red;">
    <div id="child" style="opacity: 1"> Still just 50% visible </div>
</div>

But you could do something like this:

<div id="wrapper" style="position: relative;">
    <div id="parent" style="position: absolute; top: 0; left: 0; opacity: 0.5; background-color: red; width: 100%;"> &nbsp; </div>
    <div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>

There are a handful of caveats, but this is the only good way to achieve what you want.

In this example I'm dealing with one line of text, and in the "parent" I'm including an   which will also occupy one line in height. If your "child" is of a greater height, the "parent" will not grow, because it is really not a parent at all. You'll have to manually set a height.

You'll also manually have to specify width, as you're dealing with absolutely positioned elements.

I'll say, tho, before people start saying that absolute positioning is such a terrible way to solve design problems, that there is one occasion where I think it is perfectly legit: when also dealing with position: relative as in the above example, and to absolutely position an element based on that, and not on the entire window.