到對圖片進行處理，我們經常會想到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 陰影

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

filter是css3的一個屬性，大家應該都很少用到，很多人只是知道有這個屬性。Webkit率先支持了這幾個功能，不過現在大部分瀏覽器也都做了兼容性，下面大家就一起來學習吧。

參數語法

現在規范中支持的效果有：

語法

-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);

示例

無效果filter:none;

模糊filter:blur(10px);

灰度filter:grayscale(0.5);

亮度filter:brightness(0.5);

對比度filter:contrast(2.6);

飽和度filter:saturate(7.9);

色相旋轉filter:hue-rotate(260deg);

反色filter:invert(0.9);

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

組合

最后大家看看幾種組合效果

是不是感覺美美噠了，美女換了身衣服，皮膚也變得紅潤了，頭發唇彩等都變了。前端也可以用代碼P出好看的圖片，是不是很厲害？

上面的效果代碼：

filter:saturate(1.9) contrast(.6) hue-rotate(320deg);

公告

喜歡小編的點擊關注，了解更多知識！