Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

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.

1 Answer

0 votes
by (40.7k points)

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.

Related questions

0 votes
1 answer
asked Aug 26, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

Browse Categories

...