CSS滤镜如何实现图片变成“蓝色调”？

Question

有没有办法将图像变成“蓝色调”或“绿色调”或其他颜色？就像CSS中的滤镜一样？或者可能是滤镜的组合？

filter:grayscale(100%);

谢谢！

找到了一个解决方案，但对于非技术人员来说不太友好： css3使用滤镜将灰色图像转换为蓝色？

我希望有一种解决方案，可以为您要转换成的颜色给出“rgb”值。

- Emanuel

---

可能是CSS滤镜背后的数学原理是什么？的重复问题。 - Sunny Patel

你链接的重复问题中提出的解决方案可能是最简单的（如果需要，你可能需要稍微复杂化一些，并在“棕褐色”、“色相旋转”和“饱和度”滤镜中添加“灰度”、“对比度”和“亮度”，以便真正获得你想要的确切蓝色阴影）。如果你了解色相旋转的工作原理，这可能会让事情变得更加清晰。 - benvc

如果您熟悉使用内联SVG和feColorMatrix滤镜，那么这很容易实现。 - Michael Mullany

Answer 1

你可以很容易地使用混合模式来实现这种效果。

在图像前设置所需颜色的背景图像。

然后设置 blend-mode: color;

尽管支持并不完美，但滤镜也存在类似的问题。

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

- vals

---

这将是完美的解决方案，唯一的问题是它在Edge上无法工作。https://caniuse.com/#search=background-blend-mode - Emanuel

使用SVG滤镜 - Michael Mullany