自己在搜索圖片加載優(yōu)化問題，看到這篇文章關(guān)于圖片濾鏡屬性惧浴，感覺挺不錯(cuò)的所以分享出來了线婚。
filter：是定義元素（通常<img>）的可視效果（例如飽和度）
兼容問題：一般用事必須對(duì)webkit做兼容
css 語法（“|”代表或）：
filter： none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Filter描述：
none：默認(rèn)值，沒有效果济蝉。
url()URL函數(shù)接受一個(gè)XML文件淌铐，該文件設(shè)置了 一個(gè)SVG濾鏡肺然，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素。
blur(px)：給圖像設(shè)置高斯模糊腿准。"radius"一值設(shè)定高斯函數(shù)的標(biāo)準(zhǔn)差际起，或者是屏幕上以多少像素融在一起， 所以值越大越模糊吐葱；
如果沒有設(shè)定值街望，則默認(rèn)是0；這個(gè)參數(shù)可設(shè)置css長度值弟跑，但不接受百分比值灾前。
brightness(%)：給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗孟辑。如果值是0%哎甲，圖像會(huì)全黑蔫敲。值是100%，則圖像無變化烧给。其他的值對(duì)應(yīng)線性乘數(shù)效果燕偶。值超過100%也是可以的喝噪，圖像會(huì)比原來更亮础嫡。如果沒有設(shè)定值，默認(rèn)是1酝惧。
contrast(%)：調(diào)整圖像的對(duì)比度榴鼎。值是0%的話，圖像會(huì)全黑晚唇。值是100%巫财，圖像不變。值可以超過100%哩陕，意味著會(huì)運(yùn)用更低的對(duì)比平项。若沒有設(shè)置值，默認(rèn)是1悍及。
drop-shadow(h-shadow v-shadow blur spread color)：給圖像設(shè)置一個(gè)陰影效果闽瓢。陰影是合成在圖像下面，可以有模糊度的心赶，可以以特定顏色畫出的遮罩圖的偏移版本扣讼。 函數(shù)接受(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的缨叫。該函數(shù)與已有的box-shadow box-shadow屬性很相似椭符；不同之處在于徙融，通過濾鏡灼卢，一些瀏覽器為了更好的性能會(huì)提供硬件加速。參數(shù)如下：(必須)
這是設(shè)置陰影偏移量的兩個(gè) 值.設(shè)定水平方向距離. 負(fù)值會(huì)使陰影出現(xiàn)在元素左邊.設(shè)定垂直距離.負(fù)值會(huì)使陰影出現(xiàn)在元素上方酱固。查看可能的單位.
如果兩個(gè)值都是0, 則陰影出現(xiàn)在元素正后面 (如果設(shè)置了and/or琐簇，會(huì)有模糊效果).(可選)
這是第三個(gè)code>值. 值越大蒸健，越模糊，則陰影會(huì)變得更大更淡.不允許負(fù)值 若未設(shè)定鸽嫂，默認(rèn)是0?(則陰影的邊界很銳利).(可選)
這是第四個(gè) 值. 正值會(huì)使陰影擴(kuò)張和變大纵装，負(fù)值會(huì)是陰影縮小.若未設(shè)定，默認(rèn)是0?(陰影會(huì)與元素一樣大小).
注意: Webkit, 以及一些其他瀏覽器 不支持第四個(gè)長度据某，如果加了也不會(huì)渲染橡娄。(可選)
查看 該值可能的關(guān)鍵字和標(biāo)記。若未設(shè)定癣籽，顏色值基于瀏覽器挽唉。在Gecko?(Firefox), Presto (Opera)和Trident (Internet Explorer)中滤祖， 會(huì)應(yīng)用colorcolor屬性的值。另外, 如果顏色值省略瓶籽，WebKit中陰影是透明的匠童。
grayscale(%)將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例塑顺。值為100%則完全轉(zhuǎn)為灰度圖像汤求，值為0%圖像無變化。值在0%到100%之間严拒，則是效果的線性乘子扬绪。若未設(shè)置，值默認(rèn)是0裤唠；
hue-rotate(deg)給圖像應(yīng)用色相旋轉(zhuǎn)挤牛。"angle"一值設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg种蘸，則圖像無變化墓赴。若值未設(shè)置，默認(rèn)值是0deg航瞭。該值雖然沒有最大值诫硕，超過360deg的值相當(dāng)于又繞一圈。
invert(%)反轉(zhuǎn)輸入圖像沧奴。值定義轉(zhuǎn)換的比例痘括。100%的價(jià)值是完全反轉(zhuǎn)。值為0%則圖像無變化滔吠。值在0%和100%之間纲菌，則是效果的線性乘子。 若值未設(shè)置疮绷，值默認(rèn)是0翰舌。
opacity(%)轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例冬骚。值為0%則是完全透明椅贱，值為100%則圖像無變化。值在0%和100%之間只冻，則是效果的線性乘子庇麦，也相當(dāng)于圖像樣本乘以數(shù)量。 若值未設(shè)置喜德，值默認(rèn)是1山橄。該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter舍悯，一些瀏覽器為了提升性能會(huì)提供硬件加速航棱。
saturate(%)轉(zhuǎn)換圖像飽和度睡雇。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和饮醇，值為100%則圖像無變化它抱。其他值，則是效果的線性乘子朴艰。超過100%的值是允許的观蓄，則有更高的飽和度。 若值未設(shè)置呵晚，值默認(rèn)是1蜘腌。
sepia(%)將圖像轉(zhuǎn)換為深褐色沫屡。值定義轉(zhuǎn)換的比例饵隙。值為100%則完全是深褐色的，值為0%圖像無變化沮脖。值在0%到100%之間金矛，則是效果的線性乘子。若未設(shè)置勺届，值默認(rèn)是0驶俊；
