混合模式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>