css3中filter的各種特效

css3中filter的各種特效

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

瀏覽器相容性

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

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

grayscale 灰度              值為0-1之間的小數 

sepia 褐色色相旋轉值為angle

invert 反色 值為0-1之間的小數

opacity 透明度值為0-1之間的小數

brightness 亮度 值為0-1之間的小數

brightness 亮度 值為0-1之間的小數值為num

blur 模糊    值為length

drop-shadow 陰影

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

-webkit-filter: blur(2px);範例圖片中上方為原圖，下方為加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，取值為angle，範例：-webkit-filter:hue-rotate(180deg)

invert反色

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

kit

opacity，這個屬性： filter:opacity(0.3)

brightness亮度

　　改變圖片的亮度，預設值為100%，範例：-webkit-filter:brightness(0.5) 🎀屬性取值和飽和度saturate類似，範例500%：-webkit-filter:contrast(5) 

blur模糊

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

drop-shadow陰影，範例：-webkit-filter:drop-shadow(10px 10px 10px #000)

當然，新增多個屬性也是可以的，範例：-webkit-filter:saturate(10) hue-rotate(5000g ) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);