Using filter or opacity in Background Image that dont effect the Text inside (HTML,CSS)

Question

I have the problem that my Text also using the filter effect from the parallax Background-Image Class. Example. How can I fix that problem?

My parallax Class:

.parallax {
        /* The image used */

        background-image: url(/img/mustanghinten.jpg);

        /* Set a specific height */
        min-height: 500px;
        ;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        filter: brightness(0.5);

        
        /*background-color: #42413C2E;
        object-fit: cover;
        filter: brightness(0.5);*/  
       }

My HTML

<section class="paralaxbackground">
         

        <div class="parallax"> 
            
                <h2 class="zwischenschrift1">CIRA Autovermietung Herne</h2>
                <h2 class="zwischenschrift2">Du interessierst dich für einen Mietwagen in Herne? Buche Deinen Mietwagen über die Website oder einfach telefonisch und profitiere von unserer schönen Fahrzeugauswahl und unseren günstigen Preisen. Vom minutengenauen Car-Sharing bis hin zu Stunden-, Tages- und Wochenmieten - bei Cira Autovermietung findest du deinen Mietwagen zu Tarifen, die sich nach deinen Bedürfnissen richten. Buche jetzt deinen Mietwagen in Herne!</h2>
            
        </div>
     </section>

I tried to seperate the Text from the Class but this doesnt work very well. Is there an other opportunity?

Using filter or opacity in Background Image that dont effect the Text inside (HTML,CSS)

0 Answers0