css3中filter的各種特效

標籤：

css3中的filter屬性可以說是簡單易用且強大，這些效果作用在圖片上實現一些特效（也可以作用在vidio上，此處只討論圖片特效）。

瀏覽器相容性

　　目前各大瀏覽器對於css3的相容已經非常好了，最新版本都可以支援css3，老版本的ie9以下的還是不支援，不過這不是重點，微軟都準備放棄這些老古董了。另外ie的濾鏡也是可以做到的，會另加討論。

現在規範中支援的效果有：

• grayscale 灰階               值為0-1之間的小數 
• sepia 褐色　　　　　　   值為0-1之間的小數
• saturate 飽和度　　　　 值為num
• hue-rotate 色相旋轉　　值為angle
• invert 反色　　　　　　  值為0-1之間的小數
• opacity 透明度　　　　　值為0-1之間的小數
• brightness 亮度　　　　 值為0-1之間的小數
• contrast 對比　　　　 值為num
• blur 模糊　　　　　　     值為length
• drop-shadow 陰影

用法是標準的CSS寫法，如：

-webkit-filter: blur(2px);

測試瀏覽器為chrom瀏覽器44.0版本，樣本圖片中上方為原圖，下方為加fifter效果後的圖片。

grayscale灰階

　　如果使用該效果參數裡沒值的話將會以100%來渲染，取值0-1之間為不同的灰階。下面執行個體為100%的渲染：-webkit-filter:grayscale(1) ;

sepia

　　褐色，就是美圖秀秀裡有個懷舊功能的那種效果，取值也是0-1，-webkit-filter:sepia(1) ;

saturate飽和度

　　該屬性改變圖片的飽和度，取值範圍為數字即可，預設值100%，樣本為800%：-webkit-saturate(6) ;

hue-rotate色相旋轉

　　hue-rotate用來改變圖片的色相，預設值為0deg，取值為angle，樣本：-webkit-filter:hue-rotate(180deg) 

invert反色

　　invert的效果就和照片底片有點相似，樣本：-webkit-filter:invert(1) 

opacity透明度

　　這個屬性經常遇到，樣本：-webkit-filter:opacity(0.3)

 

brightness亮度

　　改變圖片的亮度，預設值為100%，樣本：-webkit-filter:brightness(0.5) 

contrast對比

　　這個屬性取值和飽和度saturate類似，樣本500%：-webkit-filter:contrast(5) 

blur模糊

　　這個屬性改變圖片的清晰度，預設值為0，樣本：-webkit-filter:blur(1px) 

drop-shadow陰影

　　這個類似於box-shadow，給圖片加陰影，樣本：-webkit-filter:drop-shadow(10px 10px 10px #000)

當然，添加多個屬性也是可以的，樣本：-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);

就先這麼多了，ie低版本的濾鏡效果下次再討論。

css3中filter的各種特效