CSS 濾鏡特效

CSS 濾鏡是一個讓我們實現各種視覺效果的工具，我們可以利用CSS濾鏡來幫網頁加上一些視覺效果。本文將為您介紹CSS的濾鏡效果及用法。

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

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

grayscale灰階

讓圖片變成黑白圖片。可以使用0 – 1或是0% – 100%做為屬性值。

<img src="image.jpg" style="-webkit-filter:grayscale(1);">

sepia棕褐色效果

幫圖片加上棕褐色濾鏡、讓圖片瞬間變成老舊照片的感覺。可以使用0 – 1或是0% – 100%做為屬性值。

<img src="image.jpg" style="-webkit-filter:sepia(1);">

saturate飽和度

改變圖片的飽和度。可以使用數字或是百分比做為屬性值。1和100%代表不變，大於1和100%的值會讓圖片更加鮮明。

<img src="image.jpg" style="-webkit-filter:saturate(50%);">

hue-rotate色相旋轉

改變圖片的色相，將圖片中的所有顏色沿著色相環旋轉，改變整體的顏色。使用角度作為屬性質。

<img src="image.jpg" style="-webkit-filter:hue-rotate(90deg);">

invert負片

類似相片底片的負片效果，當屬性設為1或100%、圖片完全變成負片。

<img src="image.jpg" style="-webkit-filter:invert(100%);">

opacity不透明

改變圖片的透明度，0及0%表示完全透明，1及100%表示完全不透明、介於0 – 1或是0% – 100%的值則表示半透明。

<img src="image.jpg" style="-webkit-filter:opacity(50%);">

brightness亮度

改變圖片的亮度、0及0%表示全黑，1及100%表示不變、大於1或是100%則是增加圖片的亮度。

<img src="image.jpg" style="-webkit-filter:brightness(50%);">

contrast對比

調整圖片的對比度、可以使用數字或是百分比來調整。1及100%表示不變、小於1或是100%是減少圖片的對比度、大於1或是100%則是增加圖片的對比度。

<img src="image.jpg" style="-webkit-filter:contrast(200%);">

blur模糊

讓圖片產生模糊效果、使用時需加上長度的單位、例如px。

<img src="image.jpg" style="-webkit-filter:blur(3px);">

drop-shadow下拉陰影

為圖片加上陰影效果，可以產生不規則形狀的圖片。

<img src="puppy.png" style="-webkit-filter:drop-shadow(5px 5px 5px #369);">

如果我們想要同時使用二種以上的濾鏡效果、可以這樣子用

<img src="puppy.png" style="-webkit-filter:drop-shadow(5px 5px 5px #369) contrast(200%);">

前端開發, 技術應用

CSS 濾鏡特效