[譯] 4 個 CSS 調色濾鏡

• 原文地址：4 CSS Filters For Adjusting Color
• 原文做者：Steven Bradley
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：iceytea
• 校對者：lgh757079506, Baddyo

SVG 提供了一種非破壞性的方式來更改圖像或圖形的某些顏色屬性。但不幸的是，有一些更改實現起來比較麻煩。CSS 濾鏡容許你以非破壞性的方式更改某些顏色屬性，而且比 SVG 濾鏡更簡單。

過去幾周裏，我一直把 CSS 濾鏡做爲 SVG 濾鏡的備選方案來探討。首先我大致介紹了一下濾鏡，並展現了濾鏡函數 blur() 的示例；而後我介紹了 url() 和 drop-shadow() 濾鏡函數並分別提供了示例。

今天我想帶你瞭解另外四個 CSS 濾鏡函數，這些函數都是 SVG 濾鏡函數 feColorMatrix 不一樣類型和值的快捷方式。

feColorMatrix

feColorMatrix 能夠做爲更改元素中某些顏色基本屬性的通常方法。顧名思義，它經過使用值矩陣來爲元素添加不一樣的濾鏡效果。

CSS 中有四個不一樣的濾鏡函數，它們能夠複製使用 feColorMatrix 建立的效果。這有力地證實了，單個 SVG 濾鏡比任何一個單獨的 CSS 濾鏡函數都要強大。

如下是那四個 CSS 濾鏡：

• grayscale();
• hue-rotate();
• saturate();
• sepia();

那就讓咱們依次探究這些 CSS 濾鏡函數，用它們爲這張熟悉的（若是你一直在關注本系列文章的話）圖片改變顏色吧。

grayscale()

grayscale() 將圖像轉換爲灰度圖像。

grayscale() = grayscale( [ <number> | <percentage> ] )
複製代碼

你能夠經過提供介於 0.0 和 1.0 之間的數字或 0% 到 100% 之間的百分比來肯定轉換圖像的比例。100%（或 1.0）將圖像徹底轉換爲灰度圖像，0%（或 0.0）不會轉換圖像。0.0 到 1.0（或 0% 到 100%）之間的值是效果的線性乘數。不容許使用負值。

在第一個例子中，我給濾鏡函數傳入了值 1，給圖片賦予了 100% 灰度的效果。

.strawberry {
 filter: grayscale(1);
}
複製代碼

原始圖像包含大量灰色，但我認爲你依然能夠看到濾鏡的效果，由於如今全部彩色都已被擦除。

爲了比較，我在下面列出了與濾鏡函數等效的矩陣實現方式。公平地說，使用 feColorMatrix 來刪除彩色的更簡便方法，是把 type 屬性設置爲 saturate。我稍後會告訴你的。

<filter id="grayscale">
 <feColorMatrix type="matrix" values="(0.2126 + 0.7874 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 + 0.2848 * [1 - amount]) (0.0722 - 0.0722 * [1 - amount]) 0 0 (0.2126 - 0.2126 * [1 - amount]) (0.7152 - 0.7152 * [1 - amount]) (0.0722 + 0.9278 * [1 - amount]) 0 0 0 0 0 1 0"/>
</filter>
複製代碼

儘管如此，這個示例還是 CSS 濾鏡功能更易用的有力佐證。使用這個特定矩陣，只是由於我在網上看到了該方法的一個應用示例。我不須要在 CSS 濾鏡函數中搜索值 1。

hue-rotate()

hue-rotate() 按指定的量更改元素中每一個像素的色調。

hue-rotate() = hue-rotate( <angle> )
複製代碼

參數 angle（角度）以度爲單位，你須要將單位指定爲 deg。0deg 使元素保持不變，360deg 的任意倍數（720deg、1080deg、1440px 等）也是如此。

在這個例子中，我將色相旋轉了 225 度。

.strawberry {
 filter: hue-rotate(225deg);
}
複製代碼

該值將本來是紅色和黃色的花色，變得更加偏向粉色、紫色和藍色。

這是用於比較的 SVG 濾鏡。相比之下，CSS 濾鏡仍然更簡單，但在這種狀況下的差距不大。

<filter id="hue-rotate">
 <feColorMatrix type="hueRotate" values="225"/>
</filter>
複製代碼

saturate()

CSS 還提供了 saturate()，可用於提升或下降元素顏色的飽和度。

saturate() = saturate( [ <number> | <percentage> ] )
複製代碼

與灰度函數同樣，該函數的參數值定義了轉換的比例。0%（或 0.0）使元素徹底去飽和，100%（1.0）使元素保持不變。0 到 100 之間的值是效果的線性乘數。

在這裏，我將元素設置爲 50% 飽和度。

.strawberry {
 filter: saturate(0.5);
}
複製代碼

這生成了下面的圖像效果。

saturate() 不容許使用負值，但你能夠設置大於 100% 或 1.0 的值使元素過飽和。下面是同一張圖片施加 900% 飽和度的效果（filter: saturate(9);）。

和 saturate() 對應的 SVG 濾鏡也很簡單。

<filter id="saturate">
 <feColorMatrix type="saturate" values="0.5"/>
</filter>
複製代碼

在以前我曾經提到，用 feColorMatrix 來建立灰度圖像，有一種更簡單的方式，那就是把 type 屬性設爲 saturate。你所要作的就是將值設置爲 0 以使圖像徹底去飽和，這與將其設置爲 saturate(100%) 相同。

sepia()

最後是 sepia()，它將圖像轉換爲棕褐色。

sepia() = sepia( [ <number> | <percentage> ] )
複製代碼

如今你應該很熟悉這種寫法了。這裏的值定義了轉換比例，100%（1.0）展示爲徹底棕褐色，0%（0.0）使圖像效果保持不變。從 0% 到 100%，效果線性加強。

這個函數不容許使用負值，你能夠設置大於 100%（1.0）的值，但效果不會繼續加強。

這裏我將 sepia 設爲 75%：

.strawberry {
 filter: sepia(75%);
}
複製代碼

下圖是濾鏡的效果展現：

feColorMatrix 不支持棕褐色效果模式。若是要得到相同的棕褐色效果，你須要使用另外一個模型。

<filter id="sepia">
 <feColorMatrix type="matrix" values="(0.393 + 0.607 * [1 - amount]) (0.769 - 0.769 * [1 - amount]) (0.189 - 0.189 * [1 - amount]) 0 0 (0.349 - 0.349 * [1 - amount]) (0.686 + 0.314 * [1 - amount]) (0.168 - 0.168 * [1 - amount]) 0 0 (0.272 - 0.272 * [1 - amount]) (0.534 - 0.534 * [1 - amount]) (0.131 + 0.869 * [1 - amount]) 0 0 0 0 0 1 0"/>
</filter>
複製代碼

我認爲，在達成相同效果上，SVG 能夠爲你提供更大的靈活性，CSS 濾鏡函數更簡單。

結論

上面提到的這四個 CSS 濾鏡函數都是 feColorMatrix 的快捷方式。其中有兩個（grayscale() 和 sepia()）替換了複雜矩陣，另外兩個替換了特定類型的函數。

我但願你能瞭解到這四個濾鏡函數都簡單易用好理解。但恐怕你在使用這些函數調整圖像圖形參數時，仍是會遇到一些困難。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。