CSS3 擁有 Filter 濾鏡特效模組一系列的功能，例如 filter: opacity(0.5) blur(4px); 就可以做出透明度 0.5 加上高斯模糊 4px 的效果，除此之外 Filter 濾鏡還有很多功能：
- filter:blue( 像素 ); 高斯模糊
- filter:opacity( 數字 ); 透明度
- filter:drop-shadow( 像素 像素 像素 顏色 ); 陰影
- filter:grayscale( 數字 / 百分比 ); 灰階
- filter:sepia(); 單色調 – 褐色
- filter:invert( 數字 / 百分比 ); 顏色反轉
- filter:hue-rotate( 360deg ); 色彩調整
- filter:brightness( 數字 / 百分比 ); 亮度調整
- filter:contrast( 數字 / 百分比 ); 對比調整
- filter:saturate( 數字 / 百分比 ); 飽和度調整
我們使用一個簡單的網頁範例來練習這些 Filter 濾鏡效果以下面這個簡單的網頁範例，中間有放三張圖片，這三張圖片目前的顏色是正常的。
第一步：
我們在 CSS 裡面幫圖片寫上 Filter 濾鏡效果
|
.BOX img{
filter: sepia();
}
|
sepia() 濾鏡會把圖片變成單色調的楬色效果，如下圖：
接著，我想要讓圖片成為藍色調，因此我就在後面加上 hue-rotate( ) 來調整顏色， hue-rotate( ) 是由 0 度到 360 度 的色度來調整顏色，大至上是紅橙黃綠藍紫這樣的排序，就像彩紅的色彩一樣，同學可多試試便可調整出想要的色彩，語法如下：
|
.BOX img{
filter: sepia() hue-rotate(150deg);
}
|
圖片調整之後的效果，如下圖：
接下來我想提昇照片色彩的飽和度，因些我又多加了一句 saturate(160%) 語法如下所示：
|
.BOX img{
filter: sepia() hue-rotate(150deg) saturate(160%);
}
|
調整過後的網頁圖片，如下圖：
然後，我們讓滑鼠摸到照片的時候可以恢復原來正常的色彩，所以我們可以加上 filter:none; 語法如下所示：
|
.BOX img{
filter: sepia() hue-rotate(150deg) saturate(160%);
}
.BOX img:hover{
filter: none;
}
|
為了讓範例更有趣一點，我們再為照片加上漸變動畫效果 transitions:1.5s; 使用者摸到照片的時候就會以動畫的方式，由一開始藍色的照片，轉變成為正常色彩的照片了。
|
.BOX img{
transition: 1.5s; /*漸變動畫效果*/
filter: sepia() hue-rotate(150deg) saturate(160%);
}
.BOX img:hover{
filter: none; /*滑鼠摸到照片時就會取消所有的濾鏡效果 變成一張正常的照片*/
}
|
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
