在css中，可以使用filter屬性改變圖片的顏色，只需要給圖片元素設(shè)置“filter:樣式值”樣式即可。filter屬性設(shè)置或檢索對(duì)象所應(yīng)用的濾鏡效果，定義了元素的可視效果（例如：模糊與飽和度）。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

說(shuō)到對(duì)圖片進(jìn)行處理，我們經(jīng)常會(huì)想到PhotoShop這類(lèi)的圖像處理工具。作為前端開(kāi)發(fā)者，我們經(jīng)常會(huì)需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖標(biāo)顯示不同的顏色。或者是hover的時(shí)候，對(duì)圖片的對(duì)比度，陰影進(jìn)行處理。

你以為這些是經(jīng)過(guò)PS軟件處理出來(lái)的？不不不，純粹的是用css寫(xiě)出來(lái)的，很神奇把。

強(qiáng)大的 CSS:filter

CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過(guò)濾器通常被用于調(diào)整圖片，背景和邊界的渲染。 MDN

CSS標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)。

filter: none             | blur()      | brightness()      | contrast()      | drop-shadow()      | grayscale()      | hue-rotate()      | invert()      | opacity()      | saturate()      | sepia()      | url();

<!--html--> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原圖">

filter: none

沒(méi)有任何效果，默認(rèn)filter就為none

filter:blur( ) 高斯模糊

給圖像一個(gè)高斯模糊效果，length值越大，圖像越模糊

我們來(lái)嘗試一下

img {     filter:blur(2px);; }

brightness(%) 線性乘法

可以讓圖片看起來(lái)更亮或者更暗

img {     filter:brightness(70%); }

contrast(%) 對(duì)比度

調(diào)整圖像的對(duì)比度。

img {     filter:contrast(50%); }

drop-shadow(h-shadow v-shadow blur spread color)

給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫(huà)出的遮罩圖的偏移版本。 函數(shù)接受<shadow>(在CSS3背景中定義)類(lèi)型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過(guò)濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速

利用這個(gè)方案，我們其實(shí)改變類(lèi)似于一些圖標(biāo)的顏色，比如黑色的圖標(biāo)變成藍(lán)色的圖標(biāo)。

PNG格式小圖標(biāo)的CSS任意顏色賦色技術(shù)

img {     filter: drop-shadow(705px 0 0 #ccc); }

在這里，我們將圖片投影形成一個(gè)同等大小的灰色區(qū)域。

hue-rotate(deg) 色相旋轉(zhuǎn)

img {     filter:hue-rotate(70deg); }

看，小姐姐變成了阿凡達(dá)！

invert(%) 反轉(zhuǎn)

這個(gè)函數(shù)的作用是反轉(zhuǎn)輸入圖像，有點(diǎn)像曝光的效果

img {     filter:invert(100%) }

grayscale(%) 將圖像轉(zhuǎn)換為灰度圖像

這個(gè)效果可以將圖片做舊，有一種時(shí)代滄桑感。喜歡古風(fēng)的人一定會(huì)喜歡上這個(gè)效果的

img {     filter:grayscale(80%); }

除了古風(fēng)還有一種用法是有的時(shí)候需要將全站變成灰色，如大屠殺紀(jì)念日的時(shí)候。

可以這樣設(shè)置

*{     filter: grayscale(100%);     -webkit-filter: grayscale(100%);     -moz-filter: grayscale(100%);     -ms-filter: grayscale(100%);     -o-filter: grayscale(100%); }

sepia(%) 將圖像轉(zhuǎn)換為深褐色

下面給我的小姐姐一個(gè)暖暖的色調(diào)。

img {     filter:sepia(50%) }

大家是不是發(fā)現(xiàn)我并沒(méi)有把url()方法寫(xiě)到這上面來(lái)

沒(méi)錯(cuò)，因?yàn)槲蚁氚堰@個(gè)內(nèi)容放到最后來(lái)說(shuō)，filter:url()就是css濾鏡改變圖片的終極方法。CSS:filter可以導(dǎo)入一個(gè)svg濾鏡，作為他自己的濾鏡。

終極變色解決方案！ filter:url();

為什么說(shuō)filter:url()是圖片變色的終極解決方案呢，請(qǐng)容我慢慢道來(lái)。

我們先科普一下PS的工作原理，我們都知道網(wǎng)頁(yè)是有三原色的R(紅) G(綠) B(藍(lán))，常見(jiàn)的RGBA還包括一個(gè)opicity值，而opcity值是根據(jù)alpha通道計(jì)算出來(lái)的。也就是說(shuō)，我們見(jiàn)到的網(wǎng)頁(yè)的每一個(gè)像素點(diǎn)都是由紅藍(lán)綠再加alpha四個(gè)通道組成，每一個(gè)通道我們稱(chēng)之為色板，PS中的8位板的意思就是2的八次方256，意思就是每一個(gè)通道的取值范圍都是(0-255) SVG 研究之路 (11) – filter:feColorMatrix

如果我們可以改變每個(gè)通道的值是不是就能完美的得到我們想要的任意顏色了呢，原理上，我們可以像ps那樣利用svg濾鏡得到任何我們想要的圖像，不僅僅是變色。我們甚至可以憑空生成一幅圖像。

svg feColorMatrix大法好

<svg height="0" xmlns="http://www.w3.org/2000/svg">     <defs>         <filter id="change">                 <feColorMatrix type="matrix" values="                 0 0 0 0 0.55                 0 0 0 0 0.23                  0 0 0 0 0                  0 0 0 0 1" />         </filter>     </defs> </svg> <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="">

img {     filter:url(#change); }

通過(guò)單通道我們可以將圖片變成單一的顏色

<svg height="0" xmlns="http://www.w3.org/2000/svg">     <defs>         <filter id="change">                <feColorMatrix values="3 -1 -1 0 0                        -1 3 -1 0 0                        -1 -1 3 0 0                        0 0 0 1 0" />         </filter>     </defs> </svg>

通過(guò)雙通道我們可以的到一些非常炫酷的PS效果

當(dāng)然，在這里，只是舉個(gè)例子，通過(guò)配置矩陣中的值，我們可以配置每一個(gè)像素點(diǎn)的值按照我們定義的規(guī)則顯示

我們?cè)谶@里詳細(xì)講一下feColorMatrix 矩陣的計(jì)算方式

其中Rin Gi

n Bin a(alpha) 為原始圖片中每個(gè)像素點(diǎn)的rgba值

通過(guò)矩陣計(jì)算，得到的Rout Gout Bout Aout就是最終顯示出來(lái)的rgba值。

將圖片轉(zhuǎn)為單色 拿棕色rgba(140,59,0,1)作為例子

根據(jù)上面的公式，我們可以簡(jiǎn)化一些計(jì)算，同一行中，只設(shè)置一個(gè)通道的值，其他通道為0

不難得出矩陣

0 0 0 0 目標(biāo)值R 0 0 0 0 目標(biāo)值G 0 0 0 0 目標(biāo)值B 0 0 0 0 1

根據(jù)規(guī)則，只需要計(jì)算，255/想要顯示的顏色對(duì)應(yīng)通道 = 目標(biāo)值

我們想要的棕色rgba(140,59,0,1) 換算成色板 rgba 為 140 59 0 255

可以算出目標(biāo)值

0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0  0 0 0 0 1

總結(jié)

• css3提供了filter這個(gè)屬性，使得通過(guò)前端技術(shù)實(shí)現(xiàn)