利用CSS改變圖片顏色的100種方法！

前言

「說到對圖片進行處理，咱們常常會想到PhotoShop這類的圖像處理工具。做爲前端開發者，咱們常常會須要處理一些特效，例如根據不一樣的狀態，讓圖標顯示不一樣的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。」css

你覺得這些是通過PS軟件處理出來的？不不不，純粹的是用css寫出來的，很神奇把。html

強大的 CSS:filter

CSS濾鏡（filter）屬提供的圖形特效，像模糊，銳化或元素變色。過濾器一般被用於調整圖片，背景和邊界的渲染。 MDN前端

CSS標準裏包含了一些已實現預約義效果的函數。css3

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

沒有任何效果，默認filter就爲noneweb

filter:blur( ) 高斯模糊

給圖像一個高斯模糊效果，length值越大，圖像越模糊瀏覽器

咱們來嘗試一下微信

img {
    filter:blur(2px);;
}
複製代碼

brightness(%) 線性乘法

可讓圖片看起來更亮或者更暗markdown

img {
    filter:brightness(70%);
}
複製代碼

contrast(%) 對比度

調整圖像的對比度。svg

img {
    filter:contrast(50%);
}
複製代碼

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

給圖像設置一個陰影效果。陰影是合成在圖像下面，能夠有模糊度的，能夠以特定顏色畫出的遮罩圖的偏移版本。函數接受(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不容許的。該函數與已有的box-shadow box-shadow屬性很類似；不一樣之處在於，經過濾鏡，一些瀏覽器爲了更好的性能會提供硬件加速wordpress

利用這個方案，咱們其實改變相似於一些圖標的顏色，好比黑色的圖標變成藍色的圖標。

PNG格式小圖標的CSS任意顏色賦色技術

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

在這裏，咱們將圖片投影造成一個同等大小的灰色區域。

hue-rotate(deg) 色相旋轉

img {
    filter:hue-rotate(70deg);
}
複製代碼

看，個人小姐姐變成了阿凡達！

invert(%) 反轉

這個函數的做用是反轉輸入圖像，有點像曝光的效果

img {
    filter:invert(100%)
}
複製代碼

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

這個效果能夠將圖片作舊，有一種時代滄桑感。喜歡古風的人必定會喜歡上這個效果的

img {
    filter:grayscale(80%);
}
複製代碼

除了古風還有一種用法是有的時候須要將全站變成灰色，如大屠殺記念日的時候。

能夠這樣設置

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

sepia(%) 將圖像轉換爲深褐色

下面給個人小姐姐一個暖暖的色調。

img {
    filter:sepia(50%)
}
複製代碼

你們是否是發現我並無把url()方法寫到這上面來

沒錯，由於我想把這個內容放到最後來講，filter:url()就是css濾鏡改變圖片的終極方法。CSS:filter能夠導入一個svg濾鏡，做爲他本身的濾鏡。

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

爲何說filter:url()是圖片變色的終極解決方案呢，請容我慢慢道來。

咱們先科普一下PS的工做原理，咱們都知道網頁是有三原色的R(紅) G(綠) B(藍)，常見的RGBA還包括一個opicity值，而opcity值是根據alpha通道計算出來的。也就是說，咱們見到的網頁的每個像素點都是由紅藍綠再加alpha四個通道組成，每個通道咱們稱之爲色板，PS中的8位板的意思就是2的八次方256，意思就是每個通道的取值範圍都是(0-255) SVG 研究之路 (11) - filter:feColorMatrix

若是咱們能夠改變每一個通道的值是否是就能完美的獲得咱們想要的任意顏色了呢，原理上，咱們能夠像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);
}
複製代碼

經過單通道咱們能夠將圖片變成單一的顏色

<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>
複製代碼

經過雙通道咱們能夠的到一些很是炫酷的PS效果

固然，在這裏，只是舉個例子，經過配置矩陣中的值，咱們能夠配置每個像素點的值按照咱們定義的規則顯示

咱們在這裏詳細講一下feColorMatrix 矩陣的計算方式

其中Rin Gi

n Bin a(alpha) 爲原始圖片中每一個像素點的rgba值

經過矩陣計算，獲得的Rout Gout Bout Aout就是最終顯示出來的rgba值。

將圖片轉爲單色拿棕色rgba(140,59,0,1)做爲例子

根據上面的公式，咱們能夠簡化一些計算，同一行中，只設置一個通道的值，其餘通道爲0

不可貴出矩陣

0 0 0 0 目標值R
0 0 0 0 目標值G
0 0 0 0 目標值B
0 0 0 0 1
複製代碼

根據規則，只須要計算，255/想要顯示的顏色對應通道 = 目標值

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

能夠算出目標值

0 0 0 0 0.55
0 0 0 0 0.23
0 0 0 0 0 
0 0 0 0 1
複製代碼

多通道設置出炫酷的效果來

就如同以前咱們看到的雙通道造成的炫酷圖片通常

我們今天要把圖片的飽和度提升，該怎麼作呢？首先當然是想一想飽和度的成因，就是紅的越紅，藍的越藍，綠的越綠，由這個成因出發，我們的矩陣就能夠寫成下面的樣子，看到矩陣當中出現了 3 和 -1，必定會很那悶這是怎麼來的，箇中原理其實很容易理解，讓我們假設某一個像素的 RGB 分別是 (200/255),(100/255),(50/255)，呈現的應該是有點暗沉的橘色，經過矩陣的換算，R 變成了 200/255x3-100/255-50/255= 1.76, G 變成 200/255x(-1)+100/255*3-50/255=0.2，B 變成 200x(-1)+100x(-1)+50x3=-0.59，所以 RGB 轉換後就是：200x1.76,100x0.2,50x-0.5。SVG 研究之路 (11) - filter:feColorMatrix

<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>
複製代碼

其餘方案

除了feColorMatrix svg濾鏡還有不少的方法能夠定義濾鏡，他們一樣能夠做用到圖片上。因爲篇幅限制，這裏就不詳細展開了

總結

css3提供了filter這個屬性，使得經過前端技術實現更多炫酷的特效成爲了可能
依賴於svg的濾鏡，咱們能夠實現複雜的濾鏡效果

注意

css：filter與ie上的filter並非相同的概念
css:filter在不一樣的瀏覽器上兼容性不同，您在使用的時候須要注意瀏覽器的兼容性

參考文獻

寫在最後

本次源碼我已經放在了codePen上 codepen.io/nanhupatar/… 歡迎查看

文章不免會有疏漏，但願你們可以指正批評

安利本身的微信公衆號：前端指南