SVG滤镜使彩色图像变成纯蓝色

Question

我一直在使用-webkit-filter: grayscale(100%);来使图像变灰。是否可以将图像着色为蓝色？我想我可能使用和SVG过滤器，并在CSS像这样引用它：

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

文件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-技巧）

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

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