CSS Background Opacity [duplicate]

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

Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:

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

Answer 2

You can use pseudo-elements ::before or ::after to get a semi-transparent background and you can do this with just one container. Use something like this:

<article>   Text. </article> 

Then apply some CSS:

article {   position: relative;   z-index: 1; }  article::before {   content: "";   position: absolute;   top: 0;    left: 0;   width: 100%;    height: 100%;     opacity: .4;    z-index: -1;   background: url(path/to/your/image); } 

Example:

body {   background: red; }  article {   position: relative;   z-index: 1; }  article:before {   content: " ";   position: absolute;   top: 0;    left: 0;   width: 100%;    height: 100px;     opacity: .4;    z-index: -1;   background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg); }

<article>   Text. </article>

Note: You might need to adjust the z-index values.