Opacity in nested div tag

Question

I am looking for css a solution where I can set lower value of opacity for background color, and text over it will b completely opaque.

I tried this:

 <div style="opacity: 0.4; background:none repeat scroll 0% 0% rgb(242, 242, 242); ">
    <div style="opacity: 1;">
      Complete opaque text over background color
    </div>
 </div>

but this didn't work. Here opacity for both both background color and text are getting changed as per outer div opacity value.

Can anyone please suggest any solution?

Yotam Omer · Answer 1 · 2013-07-31T19:16:55.490

You can use rgba to set semi-transparent colors:

 <div style="background:rgba(242, 242, 242, 0.4);">
    <div>
      Complete opaque text over background color
    </div>
 </div>

The opacity of the child element will never be higher than the parent's opacity, if the parent's opacity is 0.4 then a child with opacity 1 will also be 0.4, a child with opacity 0.5 will be 0.2 etc.. It is calculated relatively to the parent's opacity.

For older IE versions use filter to achieve this effect or regular rgb as fallback for other old browsers

Opacity in nested div tag

1 Answers1