混合模式 CSS3
Blending mode CSS3
我正在尝试使用混合模式在图像上实现类似 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>
无法正常工作。
您目前正在 img
上使用 background-blend-mode
。 background-blend-mode
用于混合应用于同一元素的多个背景图像或颜色。
mix-blend-mode
允许您对堆叠的任意元素应用混合。在您的情况下,您应该在最顶部的元素 (.overlay
) 上使用 mix-blend-mode
。
#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>
我正在尝试使用混合模式在图像上实现类似 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>
无法正常工作。
您目前正在 img
上使用 background-blend-mode
。 background-blend-mode
用于混合应用于同一元素的多个背景图像或颜色。
mix-blend-mode
允许您对堆叠的任意元素应用混合。在您的情况下,您应该在最顶部的元素 (.overlay
) 上使用 mix-blend-mode
。
#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>