使用 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/

使用 CSS 对图像应用效果

Apply effect over image with CSS

html

css

effect