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:
Text added.
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:
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);
}
Note: You might need to adjust the z-index values.