Question

I have a div element with opacity: 0.7;. I set that because I want all the text inside it to be opaque. Inside this div I want also to show some images, but I would like to have opacity 100% on these images, and not 0.7. I tried by setting opacity: 1; to the images but they are shown opaque no matter what.

How can I solve this problem? I’ve searched around but couldn’t find any solution.

Thanks

Answer 1

The child of an element with transparency (opacity < 1), cannot be less transparent than its parent. So opacity: 1 will have the effect only making the child element equally transparent as its parent, but no more so.

To have partially transparent text you could, instead, use:

div {
    color: rgba(0,0,0,0.7);
}

JS Fiddle demo.

Which I think is supported by the same browsers that support the opacity property.