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

您目前正在 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>