使用CSS将色相添加到常规图像 [英] Add hue to a regular image with CSS

问题描述

图像标签中有一个常规图像，例如此:

I have a regular image in the image tag like this:

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

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

that I want to turn into this image. I saw some examples of the blend mode but for the blend mode you need to set the image as background but I have the image in the image tag.

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

Can the hue be added to the image via css without setting image as background?

推荐答案

使用具有所需背景色的图像父级.
比将mix-blend-mode: overlay;设置为您的图片

Use a parent to your image with the desired background color.
Than set mix-blend-mode: overlay; to your image

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

这篇关于使用CSS将色相添加到常规图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！