說到對圖片進行處理，我們經常會想到PS,美圖秀秀這類的圖像處理工具。作為前端,全棧開發者，我們經常會需要處理一些特效，例如根據不同的狀態，讓圖片顯示不同的顏色。或者是hover的時候，對圖片的對比度，陰影進行處理。
你以為這些是經過PS軟件處理出來的？不不不，只有一張圖片,純粹的是用css寫出來的。
本文的目標就是：手把手教大家學習CSS濾鏡（filter）屬性,CSS濾鏡提供的圖形特效，像模糊，銳化或元素變色。過濾器通常被用於調整圖片，背景和邊界的渲染。
使用CSS濾鏡只需要如下5步:
1. 準備工作
2. 使用sublime快速書寫HTML結構
3. 使用CSS選擇器選中目標標籤
4. CSS濾鏡的基本用法
5. CSS濾鏡實例演示
一、第一步 —— 準備工作
目標 : 下載並安裝sublime以及準備一張圖片素材
下載對應你操作系統的sublime編輯器，http://www.sublimetext.com/3
圖片素材:
小結 : 準備好代碼編輯器,比如sublime,hbuilder,vscode等編輯,都是可以的,再準備一張圖片素材
二、第二步 —— 書寫HTML結構
目標 : 使用sublime編輯器快速生成HTML5結構的頁面
1. 安裝sublime以後，並打開sublime.exe
2. 在電腦的某個目下新建一個空目錄code，將我們的圖片素材放一個images文件夾下，並把這個images文件夾也放在code中
3. 使用sublime打開我們剛準備好的code文件夾
4. 使用sublime新建一個HTML網頁文件,後綴名需要為html
5. 接著輸入一個英文輸入狀態下的!再按tab鍵,即可快速生成HTML5的基本結構!
6. 在網頁中插入內容
小結 : 使用代碼編輯器新建網頁文件,並加入兩張img圖片標籤,正確引入圖片
三、第三步 —— 使用CSS選擇器選中目標標籤
目標：使用CSS類選擇器選中我們頁面中的目標圖片標籤, 格式 .類名
小結 : 使用 css類選擇 格式: .類名 選中對應的目標標籤
四、第四步 —— CSS濾鏡的基本用法
目標：瞭解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 色相旋轉
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 對比度
– blur 模糊
– drop-shadow 陰影
注意:為了實現兼容性，我們加上-webkit- 前綴
-webkit-filter : function (param);
3. filter函數
注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。
小結 : filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
五、第五步 —— CSS濾鏡實例演示
目標：理解CSS濾鏡各種效果之間的不同
1. 模糊: blur(長度值) 值越大越模糊 這個參數可設置css長度值，但不接受百分比值
filter : blur(2px);
-webkit-filter : blur(2px);
值越大越模糊
2. 亮度 : brightness(百分比) 如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。
filter : brightness(30%);
-webkit-filter : brightness(30%);
3. 對比度 : contrast(%) 值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是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%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0
filter : grayscale(100%);
-webkit-filter : grayscale(100%);
6. 色相旋轉 : hue-rotate(deg) deg為旋轉度數,如果值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。
filter : hue-rotate(50deg);
-webkit-filter : hue-rotate(50deg);
7. 反色 : invert(%) 如果100%的值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。
filter : invert(100%);
-webkit-filter : invert(100%);
8. 透明度 : opacity(%) 值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於圖像樣本乘以數量。 若值未設置，值默認是1。該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。
filter : opacity(.5);
-webkit-filter : opacity(.5);
9. 飽和度 : saturate(%) 值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。
/*5代表500%*/
filter : saturate(5);
-webkit-filter : saturate(5);
10. 褐色（有種復古的舊照片感覺） : sepia(%) 值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
filter : sepia(100%);
-webkit-filter : sepia(100%);
11. 使用多個濾鏡，每個濾鏡使用空格分隔。 注意: 順序是非常重要的 (例如使用 grayscale() 後再使用 sepia()將產生一個完整的灰度圖片)。 順序有可能會導致效果不一樣。
/*使用多個濾鏡，每個濾鏡使用空格分隔。*/
filter: contrast(200%) brightness(150%) hue-rotate(50deg);
-webkit-filter: contrast(200%) brightness(150%) hue-rotate(50deg);
小結 : filter: none | blur(px) | brightness(%) | contrast(%) | drop-shadow(px,px,px,color) | grayscale(%) | hue-rotate(deg) | invert(%) | opacity(%) | saturate(%) | sepia(%) ;
總結
到此,我們已經對CSS濾鏡有了一定的初步瞭解,在以後開發過程中,可以根據我們所需要的效果,選擇使用相應的CSS濾鏡效果。
我們再來回顧一下，我們剛剛實現的步驟
1. 準備工作：下載sublime代碼編輯器以及準備圖片素材
2. 書寫HTML基本結構：使用sublime創建一個HTML文件以後,輸入!以後再按tab鍵,在body標籤中插入相應標籤,並正確引入圖片
3. 使用CSS選擇器選中目標標籤：我們使用的是CSS類選擇器,通過標籤的class屬性值獲取目標標籤
4. CSS濾鏡的基本使用： CSS濾鏡語法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
/*為了實現兼容性，我們加上-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 色相旋轉
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 對比度
– blur 模糊
– drop-shadow 陰影
閱讀更多 黑馬程序員 的文章
