How to stop child css inheriting parents opacity

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.


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:

Could do this:

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

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

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