CSS濾鏡filter用于模糊、銳化、元素變色等操作， 通常適用于圖片、背景等。

filter 初始值: none

應(yīng)用于: 所有元素

值: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

兼容性: IE瀏覽器及android4.3-瀏覽器不支持，android4.4+需要添加-webkit-前綴

grayscale

通過(guò)使用灰度grayscale，會(huì)把圖片變成灰色。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無(wú)變化，默認(rèn)是0

saturate

值為0%則是完全不飽和，值為100%則圖像無(wú)變化。超過(guò)100%的值是允許的，表示更高的飽和度。若值未設(shè)置，值默認(rèn)是1

sepia

使用sepia將圖像轉(zhuǎn)換為深褐色。值為100%完全是深褐色的，值為0%圖像無(wú)變化。若未設(shè)置，值默認(rèn)是0

hue-rotate

通過(guò)hue-rotate給圖像應(yīng)用色相旋轉(zhuǎn)。"angle"一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無(wú)變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒(méi)有最大值，但超過(guò)360deg的值相當(dāng)于又繞一圈

invert

通過(guò)invert反轉(zhuǎn)輸入圖像。100%表示完全反轉(zhuǎn)，值為0%則圖像無(wú)變化。若值未設(shè)置，值默認(rèn)是0

opacity

通過(guò)opacity表示圖像的透明程度。值為0%則是完全透明，值為100%則圖像無(wú)變化。若值未設(shè)置，值默認(rèn)是1。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過(guò)filter，一些瀏覽器為了提升性能會(huì)提供硬件加速


brightness

通過(guò)調(diào)整亮度brightness使其看起來(lái)更亮或更暗。如果值是0%，圖像會(huì)全黑。值是100%，則圖像無(wú)變化。值超過(guò)100%也是可以的，圖像會(huì)比原來(lái)更亮。如果沒(méi)有設(shè)定值，默認(rèn)是1
contrast

圖像的對(duì)比度contrast，值是0%的話，圖像會(huì)全灰。值是100%，圖像不變。值可以超過(guò)100%，意味著會(huì)運(yùn)用更低的對(duì)比度。若沒(méi)有設(shè)置值，默認(rèn)是1

blur

通過(guò)blur給圖像設(shè)置高斯模糊。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差，或者是屏幕上以多少像素融在一起，所以值越大越模糊。如果沒(méi)有設(shè)定值，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長(zhǎng)度值，但不接受百分比值

drop-shadow

drop-shadow(h-shadow v-shadow blur spread color)用來(lái)給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。函數(shù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow屬性很相似；不同之處在于，通過(guò)濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速