HELP Opacity problem in images and text.
Cem coduroglu

Cem coduroglu @cem_coduroglu

Joined:
Feb 3, 2022

HELP Opacity problem in images and text.

Publish Date: Feb 11 '22
2 7

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

Comments 7 total

  • interstrony
    interstronyFeb 11, 2022

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

  • Prakhar Tandon
    Prakhar TandonFeb 11, 2022

    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!

    • Cem coduroglu
      Cem codurogluFeb 12, 2022

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

    • Cem coduroglu
      Cem codurogluFeb 12, 2022

      Hey now i see it. Thank you so much man

Add comment