Web前端培訓(xùn)：web開發(fā)的時候需要改變圖片顏色,不會PS怎么辦?

說到對圖片進行處理，我們經(jīng)常會想到PS,美圖秀秀這類的圖像處理工具。作為前端,全棧開發(fā)者，我們經(jīng)常會需要處理一些特效，例如根據(jù)不同的狀態(tài)，讓圖片顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。

你以為這些是經(jīng)過PS軟件處理出來的?不不不，只有一張圖片,純粹的是用css寫出來的。

本文的目標(biāo)就是：手把手教大家學(xué)習(xí)CSS濾鏡(filter)屬性,CSS濾鏡提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用于調(diào)整圖片，背景和邊界的渲染。

使用CSS濾鏡只需要如下5步:

1. 準(zhǔn)備工作

2. 使用sublime快速書寫HTML結(jié)構(gòu)

3. 使用CSS選擇器選中目標(biāo)標(biāo)簽

4. CSS濾鏡的基本用法

5. CSS濾鏡實例演示

一. 第一步 —— 準(zhǔn)備工作

目標(biāo) : 下載并安裝sublime以及準(zhǔn)備一張圖片素材

下載對應(yīng)你操作系統(tǒng)的sublime編輯器，http://www.sublimetext.com/3

圖片素材:

小結(jié) : 準(zhǔn)備好代碼編輯器,比如sublime,hbuilder,vscode等編輯,都是可以的,再準(zhǔn)備一張圖片素材

二. 第二步 —— 書寫HTML結(jié)構(gòu)

目標(biāo) : 使用sublime編輯器快速生成HTML5結(jié)構(gòu)的頁面

1. 安裝sublime以后，并打開sublime.exe

2. 在電腦的某個目下新建一個空目錄code，將我們的圖片素材放一個images文件夾下，并把這個images文件夾也放在code中

3. 使用sublime打開我們剛準(zhǔn)備好的code文件夾

4. 使用sublime新建一個HTML網(wǎng)頁文件,后綴名需要為html

5. 接著輸入一個英文輸入狀態(tài)下的!再按tab鍵,即可快速生成HTML5的基本結(jié)構(gòu)!

6. 在網(wǎng)頁中插入內(nèi)容

小結(jié) : 使用代碼編輯器新建網(wǎng)頁文件,并加入兩張img圖片標(biāo)簽,正確引入圖片

三. 第三步 —— 使用CSS選擇器選中目標(biāo)標(biāo)簽

目標(biāo)：使用CSS類選擇器選中我們頁面中的目標(biāo)圖片標(biāo)簽, 格式 .類名

小結(jié) : 使用 css類選擇 格式: .類名 選中對應(yīng)的目標(biāo)標(biāo)簽

四. 第四步 —— CSS濾鏡的基本用法

目標(biāo)：了解CSS濾鏡的基本用法以及各方法之間效果差異

1. CSS濾鏡基本語法

filter: function(param);

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

提示:允許同時使用多個濾鏡，多個濾鏡效果之間使用空格分隔。

2. CSS濾鏡支持的方法(function)有

– grayscale 灰度

– sepia 褐色

– saturate 飽和度

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

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 對比度

– blur 模糊

– drop-shadow 陰影

注意:為了實現(xiàn)兼容性，我們加上-webkit- 前綴

-webkit-filter : function (param);

3. filter函數(shù)

注意: 濾鏡通常使用百分比 (如：75%), 當(dāng)然也可以使用小數(shù)來表示 (如：0.75)。

Filter	描述
none	默認值，沒有效果。
blur(px)	給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果沒有設(shè)定值，則默認是0；這個參數(shù)可設(shè)置css長度值，但不接受百分比值。
brightness(%)	給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認是1。
contrast(%)	調(diào)整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設(shè)置值，默認是1。
drop-shadow(h-shadow v-shadow blur spread color)	給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。<shadow>參數(shù)如下：<offset-x> <offset-y> (必須)這是設(shè)置陰影偏移量的兩個 <length>值. <offset-x> 設(shè)定水平方向距離. 負值會使陰影出現(xiàn)在元素左邊. <offset-y>設(shè)定垂直距離.負值會使陰影出現(xiàn)在元素上方。查看<length>可能的單位.如果兩個值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了 <blur-radius> and/or <spread-radius>，會有模糊效果).<blur-radius> (可選)這是第三個code><length>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設(shè)定，默認是0 (則陰影的邊界很銳利).<spread-radius> (可選)這是第四個 <length>值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設(shè)定，默認是0 (陰影會與元素一樣大小). 注意: Webkit, 以及一些其他瀏覽器 不支持第四個長度，如果加了也不會渲染。 <color> (可選)查看 <color>該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定，顏色值基于瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。
grayscale(%)	將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0；
hue-rotate(deg)	給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。若值未設(shè)置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。
invert(%)	反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設(shè)置，值默認是0。
opacity(%)	轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置，值默認是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。
saturate(%)	轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認是1。
sepia(%)	將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0；

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

五. 第五步 —— CSS濾鏡實例演示

目標(biāo)：理解CSS濾鏡各種效果之間的不同

1. 模糊: blur(長度值) 值越大越模糊 這個參數(shù)可設(shè)置css長度值，但不接受百分比值

filter : blur(2px);

-webkit-filter : blur(2px);

值越大越模糊

2. 亮度 : brightness(百分比) 如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設(shè)定值，默認是1。

filter : brightness(30%);

-webkit-filter : brightness(30%);

3. 對比度 : contrast(%) 值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設(shè)置值，默認是1。

filter : contrast(0);

-webkit-filter : contrast(0);

4. 陰影 : drop-shadows(陰影水平偏移位置 陰影垂直偏移位置陰影模糊程度 陰影顏色)

/*drop-shadows(陰影水平偏移位置 陰影垂直偏移位置 陰影模糊程度 陰影顏色)*/

filter : drop-shadow(10px 10px 5px #000);

-webkit-filter : drop-shadow(10px 10px 5px #000);

5. 灰度 : grayscalel(%) 值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0

filter : grayscale(100%);

-webkit-filter : grayscale(100%);

6. 色相旋轉(zhuǎn) : hue-rotate(deg) deg為旋轉(zhuǎn)度數(shù),如果值為0deg，則圖像無變化。若值未設(shè)置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。

filter : hue-rotate(50deg);

-webkit-filter : hue-rotate(50deg);

7. 反色 : invert(%) 如果100%的值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。若值未設(shè)置，值默認是0。

filter : invert(100%);

-webkit-filter : invert(100%);

8. 透明度 : opacity(%) 值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當(dāng)于圖像樣本乘以數(shù)量。若值未設(shè)置，值默認是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會提供硬件加速。

filter : opacity(.5);

-webkit-filter : opacity(.5);

9. 飽和度 : saturate(%) 值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認是1。

/*5代表500%*/

filter : saturate(5);

-webkit-filter : saturate(5);

10. 褐色(有種復(fù)古的舊照片感覺) : sepia(%) 值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認是0;

filter : sepia(100%);

-webkit-filter : sepia(100%);

11. 使用多個濾鏡，每個濾鏡使用空格分隔。 注意: 順序是非常重要的 (例如使用 grayscale() 后再使用 sepia()將產(chǎn)生一個完整的灰度圖片)。 順序有可能會導(dǎo)致效果不一樣。

/*使用多個濾鏡，每個濾鏡使用空格分隔。*/

filter: contrast(200%) brightness(150%) hue-rotate(50deg);

-webkit-filter: contrast(200%) brightness(150%) hue-rotate(50deg);

小結(jié) : filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px,px,px,color) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) ;

總結(jié)

到此,我們已經(jīng)對CSS濾鏡有了一定的初步了解,在以后開發(fā)過程中,可以根據(jù)我們所需要的效果,選擇使用相應(yīng)的CSS濾鏡效果。

我們再來回顧一下，我們剛剛實現(xiàn)的步驟

1. 準(zhǔn)備工作：下載sublime代碼編輯器以及準(zhǔn)備圖片素材

2. 書寫HTML基本結(jié)構(gòu)：使用sublime創(chuàng)建一個HTML文件以后,輸入!以后再按tab鍵,在body標(biāo)簽中插入相應(yīng)標(biāo)簽,并正確引入圖片

3. 使用CSS選擇器選中目標(biāo)標(biāo)簽：我們使用的是CSS類選擇器,通過標(biāo)簽的class屬性值獲取目標(biāo)標(biāo)簽

4. CSS濾鏡的基本使用： CSS濾鏡語法

filter: function(param);

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

/*為了實現(xiàn)兼容性，我們加上-webkit- */

-webkit-filter : function (param);

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

/*提示: 允許多個濾鏡，之間使用空格分隔。*/

5. CSS濾鏡實例演示 : 通過代碼演示,了解各個濾鏡之間不同的效果

– grayscale 灰度

– sepia 褐色

– saturate 飽和度

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

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 對比度

– blur 模糊

– drop-shadow 陰影