應用效果在圖像與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/