混合模式 CSS3答案

【问题标题】：Blending mode CSS3混合模式 CSS3
【发布时间】：2016-04-24 23:53:05
【问题描述】：

我正在尝试在具有混合模式的图像上实现 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>

不能让它工作。

【问题讨论】：

标签： css blending

【解决方案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>

【讨论】：