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>
Top comments (7)
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 now i see it. Thank you so much man
Hey Prakhar!
Thank you so much for your reply!
I can not open your images
Replace red on rgb(255,0,0,0.6).
That will reduce the text opacity.
His target is to reduce image opacity without hampering the text opacity.
And by the way, its rgba( )
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-...