Hey guys, im new in coding. I was trying an images on background with opacity 0.6. The problem is my text is getting opacity too ! I make two different divs but it doesn't work. Can you help me ?
<style>
.background {
background-image: url(barhold.jpg);
background-size: cover;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: red;
opacity: 1;
}
</style>
<title>Document</title>
</head>
<body class="w-75 mx-auto my-4">
<div class="background">
<div class="container">
<span>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore ullam recusandae
consequuntur
eligendi numquam vitae doloremque itaque quam, reiciendis perspiciatis.</p>
</span>
<hr>
</div>
</div>
Oldest comments (7)
Replace red on rgb(255,0,0,0.6).
Hey thank you i will try. So may i ask you why is that hit different
Have a look at my CSS Basics series, that might help you.
dev.to/prakhart111/some-basics-of-...
That will reduce the text opacity.
His target is to reduce image opacity without hampering the text opacity.
And by the way, its rgba( )
You shouldn't try to reduce the image's opacity, instead use your container element, for creating an overlay on the image, that will not affect your text.
I did it for you, have a look.
Feel free to ask!
Cheers!
Hey Prakhar!
Thank you so much for your reply!
I can not open your images
Hey now i see it. Thank you so much man