DEV Community

Cem coduroglu
Cem coduroglu

Posted on

HELP Opacity problem in images and text.

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>

Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
prakhart111 profile image
Prakhar Tandon

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!

Collapse
 
cem_coduroglu profile image
Cem coduroglu

Hey now i see it. Thank you so much man

Collapse
 
cem_coduroglu profile image
Cem coduroglu

Hey Prakhar!
Thank you so much for your reply!
I can not open your images

Collapse
 
interstrony profile image
interstrony

Replace red on rgb(255,0,0,0.6).

Collapse
 
prakhart111 profile image
Prakhar Tandon • Edited

That will reduce the text opacity.
His target is to reduce image opacity without hampering the text opacity.
And by the way, its rgba( )

Collapse
 
cem_coduroglu profile image
Cem coduroglu

Hey thank you i will try. So may i ask you why is that hit different

Collapse
 
prakhart111 profile image
Prakhar Tandon

Have a look at my CSS Basics series, that might help you.

dev.to/prakhart111/some-basics-of-...