CSS Background Opacity
css, html, opacity
Solution
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>
Problem
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.