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/