How To Make child does not inherit the transparency of parent in CSS

HTML & CSS
1

Hello everybody

I have question in CSS
How To Make child does not inherit the transparency of parent using (opacity property)

Example


<div id="Parent" style="opacity:0.6"> 
  <div id="child"> </div>
</div>

In the previous example, I added two div the first div is parent and parent contain child div .

I added opacity property to parent div .
in this case, the son inherited opacity property also .
I don’t want to inherit child parent .

How this can be done

2

actually it cant, by the very definition of what “transparency” is.

so the effect you want is actually a background…
for that you can you can go a couple of different ways.

  1. graphical… USE a PNG-24 ( note this has issues on IE , which need additional code to correct)
  2. rgba(number,number, number, transparency level)

there is another option, but it’s somewhat messier…



<div id="Parent" style="position:relative;">
  <div id="underlay"  style="opacity:0.6; position:absolute;left:0; top:0; bottom:0;right:0;z-index:1"></div> 
  <div id="child" style="position:relative;z-index:10;">the children are layerd ABOVE the non-semantic  underlay blank div, which is where your bg/ and transparency actually go.  </div> 
   <div id="child" style="position:relative;z-index:10;"> </div>
</div>

hope that helps

3

Here is the best/modern way to do it. http://www.visibilityinherit.com/code/modern-css-opacity.php