Opacity for overlaying tags

HTML & CSS
1

Hi,
I have noticed then when i use a background that is opaque like 0.5 the text over it suppose in h1 also become opaque too. i tried giving h1 a 1 opacity but it didn’t work. i do i make it not go transparent?
example


.background{
width:300px;
height:200px;
background:#000;
opacity:0.5;
}



<div class="background">
 <h1>Hello World</h1>
</div>
2

To prevent the text from becoming somewhat transparent, too, you can use rgba colors for the background and apply transparency with the “a” parameter.

background-color:rgba(255,255,255,.5);

Another method that is backward compatible with older browsers is to use a small (often just one pixel) semi-transparent background image.

background-image:url(“trans50.png”);

3

Like this. All browsers. http://www.visibilityinherit.com/code/modern-css-opacity.php