Masiar Masiar - 3 months ago 8
CSS Question

How to avoid inheriting opacity property in CSS?

I have a

div
element to which I set
opacity: 0.7;
in the CSS file because I would like the text inside it to be opaque. I display some images inside this
div
, but the images appear with the inherited opacity property. The result are opaque images.

Is it possible to give a CSS property to the images not to inherit the opacity of the
div
that contains them? If not, how can I avoid having the images opaque?

Thanks.

Answer

If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:

#elemId {
    color: rgba(0,0,0,0.7);
}

This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.

Comments