使用 CSS 对图像应用效果

【问题标题】：Apply effect over image with CSS使用 CSS 对图像应用效果
【发布时间】：2016-05-02 11:29:01
【问题描述】：

我有一个包含很多细节的背景图片，我需要应用某种 css/html 过滤器来产生这种效果：

（左侧有图层效果，右侧没有）（示例是用 Photoshop 应用的）。

已经尝试用不透明度覆盖图像，但无法重现相同的内容。

【问题讨论】：

不太确定你想做什么。你想从背景图片中获取颜色吗？
我有一个带有背景图像的 div。必须应用覆盖层 div 才能具有与示例图像左侧类似的效果。（图片右侧是我目前没有任何效果的）

标签： html css effect

【解决方案1】：

可以使用多重混合模式再现该滤镜。要获得效果，请在覆盖元素上使用 mix-blend-mode: multiply，如下所示：

div {
  position: absolute;
  width: 100px;
  height: 100px;
}

#div1 {
  background-color: gray;
  border: solid black 3px;
}

#div2 {
  background-color: teal;
  top: 40px;
  left: 40px;
  mix-blend-mode: multiply;
}

<!-- Underlying div -->
<div id="div1">
</div>

<!-- Overlay div -->
<div id="div2">
</div>

JSFiddle 版本：https://jsfiddle.net/sn82mb9v/

【讨论】：

非常感谢！！固定