CSS Background Opacity

Question

I am using something similar to the following code:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

I anticipated the backdrop to have an opacity of 0.4 and the text to be completely opaque. They both have an opacity of 0.4 instead.

Answer 1

The CSS opacity property can be used to change the opacity of a backdrop, image, text, or another element. This attribute has values ranging from 0 to 1. If the attribute is set to 0, the styled element will be completely translucent (ie. invisible).

img {
  opacity: 0.5;
}