Question

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 1

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.