SVG滤镜使彩色图像呈现蓝色

Question

我一直在使用-webkit-filter: grayscale(100%);将图片变成灰色。是否可以将图像着色为蓝色？我想我可以使用和SVG过滤并在CSS中引用它，如下所示：

-webkit-filter: url(filters.svg#grayscale);

file filters.svg：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

上面的代码也只是一个灰度过滤器，我不太了解SVG做蓝色过滤器。我要找的蓝色是＃002060。

非常感谢任何正确方向的帮助或指示。

Answer 1

我认为你在寻找

filter: hue-rotate(xxdeg); /* unprefixed */

JSFiddle Demo

HTML （使用原始图片并已过滤

<img src="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" alt="">

<img class="filtered" src="http://lorempixel.com/output/abstract-q-c-200-200-8.jpg" alt="">

CSS （仅限-webkit前缀）

.filtered {
-webkit-filter: hue-rotate(180deg);
}

Useful Article

Useful Color Wheel

您要查找的旋转值看起来像是238deg，但这可能没有您想要的效果。

Answer 2

您可以使用混合模式，他们的支持正在增加：

（信用：CSS-tricks）

https://css-tricks.com/almanac/properties/b/background-blend-mode/

和/或：https://css-tricks.com/snippets/css/monotone-image-css/