Opacity NOT FOUND in div

Question

Is it possible to remove the opacity inheritance from a parent to it 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, this is not possible. If you are looking for a way to make the background color or the color transparent, you can 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 you can't

Opacity is fully inherited from the divs of the fathers.

value:

 #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 trick him, but save 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 opaque HTML on your father, put it in a copy.

Answer 3

No, not strictly in the sense that you are asking. Because what actually happens is wrong, that the value is inherited in any traditional sense, but the child control is transparent as a direct effect of being in a partially transparent container.

You can get around this, tho, in many situations.

So this will not 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 can 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 few caveats, but this is the only good way to achieve what you want.

In this example, I am dealing with a single line of text, and in the "parent" I include   , which will also occupy one row in height. If your “child” is tall, the “parent” will not grow because he really is not a parent at all. You will need to manually set the height.

You also need to manually specify the width, since you are dealing with absolutely positioned elements.

I’ll say before people start saying that absolute positioning is such a terrible way to solve design problems that there is one case when I think it’s completely legal: when it also deals with position: relative , as in the example above and absolutely Position an element based on this, and not on the entire window.

Answer 4

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

For a demonstration, see the location of Twitter (specifically the background / border around the main content).

Answer 5

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

There is also a plugin to complete the task: thatsNotYoChild.js .

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

Example:

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