css - 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，但这可能没有您正在寻找的效果。