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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;