Masiar Masiar - 1 year ago 66
CSS Question

How to avoid inheriting opacity property in CSS?

I have a

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
, 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
that contains them? If not, how can I avoid having the images opaque?


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download