使用CSS在图像上应用效果

Question

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

（左侧有一层效果，右侧没有） （示例适用于photoshop）。

已尝试使用不透明度覆盖图像，但无法重现同样的事情。

Answer 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/