css 过滤器获取图像 "bluescale"？

Question

有什么方法可以将图像变成“bluescale”或“greenscale”或任何其他颜色？就像 css 中的过滤器一样？或者过滤器的组合？

filter:grayscale(100%);

谢谢!

Found a solution, but its not "user friendly" for a non technical person : css3 grey image to blue color using filters?

我希望有一个解决方案，您可以为要转换的颜色指定“rgb”。

Answer 1

您可以使用混合模式轻松获得这种效果。

在图像前面设置你想要的颜色的背景图像

并设置混合模式:颜色；

支持并不完美，但过滤器也有几乎相同的问题

.test {
    width : 200px;
    height: 200px;
    background-image: linear-gradient(blue, blue), url("https://picsum.photos/200/200");
    background-blend-mode: color;
}

<div class="test"></div>