Is Opacity is INHERITED in a div

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

Example

<style 开发者_StackOverflowtype="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>

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

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.

No you can't

Opacity is completly inherited from the fathers div.

meaning:

#father{
 opacity: 0.5;
}

#child{
 opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}

Edit:

If you want to cheat it but retaining the "workflow" of your transparent father. You can put a copy (in size and position) of the father div, on top of the father.

#father, #copy{
your css here
opacity: 0.5;
}

#copy{
   opacity: 1;
   background: transparent;
   z-index: 1000; /* or one more than the father */
}

Now instead of putting your non transparent HTML on the father, put it on the copy.

Create a transparent PNG and apply it as the background of the parent class instead of using opacity.

For a demo, see Twitter's layout (specifically the background/border around the main content).

You can avoid the parent-child opacity inheritance but it will be hacky: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

There is also a plugin to do the job, called: thatsNotYoChild.js.

With HTML5 you can also use RGBA to set a background color whose transparency (alpha) is not inherited.

Example:

/* Black with 75% transparency */
background-color: rgba(0, 0, 0, 0.25);