使用CSS将色相添加到常规图像

Question

我在图像标签中有一个常规图像，如下所示：

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