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

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

回答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.

回答3:

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.

回答4:

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).

回答5:

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