Режим наложения CSS3

Question

Я пытаюсь реализовать что-то вроде this письмо на изображении с режимом наложения.

Вот мой fiddle

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

Не могу заставить его работать.

Answer 1

Вы используете background-blend-mode на своем img. background-blend-mode используется для смешивания нескольких фоновых изображений или примененных цветов к тому же элементу.

mix-blend-mode позволяет применять смешение к произвольным элементам, которые сложены. в вашем случае вы должны использовать mix-blend-mode в верхней части страницы (.overlay).

#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>