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 expected this to make the background have an opacity of 0.4 and the text to have 100% opacity. Instead, they both have an opacity of 0.4.

Answer 1

You can try using a translucent PNG file for the background image, or you can use an RGBa (a for alpha) color for the background color.

Try this code for 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">

   <div>

      Text added.

   </div>

</div>

Note: Child class inherits opacity.