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

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

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

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

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

1. 準(zhǔn)備工作

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

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

4. CSS濾鏡的基本用法

5. CSS濾鏡實(shí)例演示

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

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

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

圖片素材:

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

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

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

1. 安裝sublime以后，并打開(kāi)sublime.exe

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

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

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

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

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

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

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

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

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

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

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

1. CSS濾鏡基本語(yǔ)法

filter: function(param);

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

提示:允許同時(shí)使用多個(gè)濾鏡，多個(gè)濾鏡效果之間使用空格分隔。

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

– grayscale 灰度

– sepia 褐色

– saturate 飽和度

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

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 對(duì)比度

– blur 模糊

– drop-shadow 陰影

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

-webkit-filter : function (param);

3. filter函數(shù)

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

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

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

五. 第五步 —— CSS濾鏡實(shí)例演示

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

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

filter : blur(2px);

-webkit-filter : blur(2px);

值越大越模糊

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

filter : brightness(30%);

-webkit-filter : brightness(30%);

3. 對(duì)比度 : contrast(%) 值是0%的話，圖像會(huì)全黑。值是100%，圖像不變。值可以超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒(méi)有設(shè)置值，默認(rèn)是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%圖像無(wú)變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0

filter : grayscale(100%);

-webkit-filter : grayscale(100%);

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

filter : hue-rotate(50deg);

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

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

filter : invert(100%);

-webkit-filter : invert(100%);

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

filter : opacity(.5);

-webkit-filter : opacity(.5);

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

/*5代表500%*/

filter : saturate(5);

-webkit-filter : saturate(5);

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

filter : sepia(100%);

-webkit-filter : sepia(100%);

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

/*使用多個(gè)濾鏡，每個(gè)濾鏡使用空格分隔。*/

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)對(duì)CSS濾鏡有了一定的初步了解,在以后開(kāi)發(fā)過(guò)程中,可以根據(jù)我們所需要的效果,選擇使用相應(yīng)的CSS濾鏡效果。

我們?cè)賮?lái)回顧一下，我們剛剛實(shí)現(xiàn)的步驟

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

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

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

4. CSS濾鏡的基本使用： CSS濾鏡語(yǔ)法

filter: function(param);

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

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

-webkit-filter : function (param);

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

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

5. CSS濾鏡實(shí)例演示 : 通過(guò)代碼演示,了解各個(gè)濾鏡之間不同的效果

– grayscale 灰度

– sepia 褐色

– saturate 飽和度

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

– invert 反色

– opacity 透明度

– brightness 亮度

– contrast 對(duì)比度

– blur 模糊

– drop-shadow 陰影