html - 使用 CSS 为常规图像添加​​色调

Question

我在图像标签中有一个常规图像，如 this :

<img src="http://i.imgur.com/StEW4JD.jpg" class="image">

我想变成这个 image .我看到了混合模式的一些示例，但对于混合模式，您需要将图像设置为背景，但我在图像标签中有图像。

是否可以在不将图像设置为背景的情况下通过 css 将色调添加到图像中？

Answer 1

使用具有所需背景颜色的父图像。
比设置 mix-blend-mode: overlay; 到你的图像

img{max-width:100%;vertical-align:top;}


.blend-overlay{ mix-blend-mode: overlay; }

<div style="background:#822;">
   <img class="blend-overlay" src="https://i.imgur.com/StEW4JD.jpg">
</div>

https://stackoverflow.com/a/31528825/383904