Mischmodus CSS3

Question

Ich versuche, etwas wie this Buchstaben auf einem Bild mit Mischmodus zu implementieren.

Hier ist meine fiddle

<div id="box"> 
    <div id="image"> 
    <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> 
    </div> 
    <div id="overlay">J</div> 
</div> 

Kann es nicht funktioniert.

Answer 1

Sie verwenden derzeit background-blend-mode auf Ihrem img. background-blend-mode wird verwendet, um mehrere Hintergrundbilder oder Farben auf das gleiche Element zu mischen.

mix-blend-mode können Sie das Überblenden auf beliebige Elemente anwenden, die gestapelt sind. In Ihrem Fall sollten Sie mix-blend-mode auf dem obersten Element (.overlay) verwenden.

#box { 
 
    height: 1000px; 
 
    background-color: white; 
 
} 
 

 
#image img { 
 
    position: relative; 
 
} 
 

 
#overlay { 
 
    color: green; 
 
    position: absolute; 
 
    bottom: -300px; 
 
    font-size: 1000px; 
 
    text-transform: uppercase; 
 
    transition: transform 0.9s ease-in-out; 
 
    mix-blend-mode: multiply; 
 
}

<div id="box"> 
 
    <div id="image"> 
 
    <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> 
 
    </div> 
 
    <div id="overlay">J</div> 
 
</div>