应用效果在图像与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/