底下的那朵花、當滑鼠滑過時、花瓣的顏色會變成紫色。以往、如果我們想要實現這樣的效果、需要準備二張圖片，現在我們只要使用CSS Filters濾鏡效果就可以輕鬆達成。

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。

如何應用CSS濾鏡

當我們想要對某個網頁元素進行渲染時、就要使用”filter”這個參數。設定的方法為：filter: 特效名稱(數值/百分比)。

div { +filter: grayscale(100%); }

上面的設定讓<div>元素轉變成黑白影像。只要調整刮號裡的百分比、就可以得到特效的強度。

div { +filter: grayscale(50%); }

如果我們需要同時使用二種以上的特效，可以這樣子做：

div { +filter: grayscale(100%) blur(3px); }

CSS Filters濾鏡效果共有十種特效，分別是：

grayscale灰階
sepia懷舊
saturate飽和
hue-rotate色相旋轉
invert負片
opacity不透明
brightness亮度
contrast對比
blur模糊
drop-shadow下拉陰影

grayscale灰階

grayscal()可以將網頁元素轉換成黑白影像。括號裡可以使用0% 到100%的百分比控制、也可以使用0至1的數字控制。0和0%表示顏色不變、1和100%則是沒有任何色彩的黑白影像。

.grayscale{
-webkit-filter:grayscale(1);
}

sepia懷舊

sepia()會在影像疊上一層深褐色、產生老照片的效果。控制的方法和grayscal()一樣、同樣可以使用數字及百分比來設定。0和0%表示顏色不變，1和100%則讓影像轉變成只有褐色的單色影像、就和老照片一樣。

.sepia{
-webkit-filter:sepia(1);
}

saturate飽和

調整影像的飽和度、可以讓影像看來更鮮艷。1和100%表示顏色不變；小於1和100%是降低飽和度；大於1和100%則是增加飽和度。

.saturate{
-webkit-filter:saturate(0.5);
}

hue-rotate色相旋轉

透過旋轉色相環可以產生很詭異的顏色效果。因為是旋轉色相環、所以使用角度(0deg – 360deg)來控制。

.hue-rotate{
-webkit-filter:hue-rotate(90deg);
}

invert負片

使用1或100%會讓影像看起來像底片一樣、明暗相反、顏色轉變成補色。0和0%表示顏色不變。介於0和1則會顯示轉化中的效果。

.invert{
-webkit-filter:invert(1);
}

opacity不透明

這是最容易理解的濾鏡了、0表示完全透明、1表示完全不透明。介於0和1之間則是半透明狀態。不透明度同樣可以用百分比來設定。

.opacity{
-webkit-filter:opacity(.2);
}

brightness亮度

就像調整螢幕的亮度一樣、你可以增加也可以減少亮度。100%表示不變、小於100%是減少亮度、大於100%則是增加亮度、設成0%會讓影像完全變黑。

.brightness{
-webkit-filter:brightness(.5);
}

contrast對比

跟brightness()一樣、這也是調整螢幕會用到的功能。作用的方式是調整畫面明亮和陰暗部份的差距。如果設定成0、影像中明亮和陰暗部份沒有了差距、影像就變成了灰色的色塊。100%表示顏色不變、大於100%則明暗之間的差距會加大

.contrast{
-webkit-filter:contrast(2);
}

blur模糊

有點像失焦的效果、括號裡要設定模糊的程度。設定時別忘了加上單位、例如：px、em…。

.blur{
-webkit-filter:blur(3px);
}

drop-shadow下拉陰影

這是可以真實反應影像原始內容的陰影效果。和只能製作塊狀陰影的box-shadow()不同、詳細的用法可以參考這篇文章：CSS 陰影效果的比較：Drop-Shadow 與 Box-Shadow

.drop-shadow{
-webkit-filter:drop-shadow(5px 5px 5px #333);
}