How to stop child css inheriting parents opacity

HTML & CSS
1

I’m using opacity: 0.8 for a parent div to give a transparent background but that opacity is being applied to the divs child images and text etc, is there a way to override this so they don’t inherit the opacity setting? I know I could do this with css3 rgba but I want this to work in IE.

Thanks

2

Hi, opacity is applied as a whole so you can’t get children to unopacity themselves.

Renest it to be outside of the opacity element :slight_smile:

3

Could do this:


.box_rgba
{
  background-color: rgba(255, 0, 0, 0.5 );  /* FF3+, Saf3+, Opera 10.10+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#80FF0000', EndColorStr='#80FF0000'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#80FF0000', EndColorStr='#80FF0000')"; /* IE8 */
}
4

logic earth, isn’t that .5 opacity there going to still be .5 of .8??

5

If the OP continues to use opacity yes, But I figured the OP is smarter enough.