—引導—
在CSS3中，有一個強大的屬性，那就是filter屬性，filter顧名思義就是“濾鏡”的意思，用filter屬性可以讓圖片無需PS處理就達到一些簡單的顯示效果。
—定義和使用—
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
| 默認值 | none |
| 繼承 | none |
| 動畫支持 | 是 |
| 版本 | CSS3 |
| JavaScript語法 | object.style.WebkitFilter="grayscale(100%)" |
—瀏覽器支持—
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 為指定瀏覽器的前綴。
—CSS 語法—
filter:none| blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
—Filter 函數—
注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。
| 屬性 | 描述 |
| none | 默認值，無效果 |
| blur(px) | 給圖像設置高斯模糊。"radius"一值設定高斯函數的標准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。 |
| brightness(%) | 給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。 |
| contrast(%) | 調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味着會運用更低的對比。若沒有設置值，默認是1。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 給圖像設置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。 函數接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關鍵字是不允許的。該函數與已有的box-shadow box-shadow屬性很相似；不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。
|
| grayscale(%) | 將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0； |
| hue-rotate(deg) | 給圖像應用色相旋轉。"angle"一值設定圖像會被調整的色環角度值。值為0deg，則圖像無變化。若值未設置，默認值是0deg。該值雖然沒有最大值，超過360deg的值相當於又繞一圈。 |
| invert(%) | 反轉輸入圖像。值定義轉換的比例。100%的價值是完全反轉。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。 若值未設置，值默認是0。 |
| opacity(%) | 轉化圖像的透明程度。值定義轉換的比例。值為0%則是完全透明，值為100%則圖像無變化。值在0%和100%之間，則是效果的線性乘子，也相當於圖像樣本乘以數量。 若值未設置，值默認是1。該函數與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升性能會提供硬件加速。 |
| saturate(%) | 轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。 |
| sepia(%) | 將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0； |
| url() | URL函數接受一個XML文件，該文件設置了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素。 例如： filter: url(svg-url#element-id) |
| inherit | 從父元素繼承該屬性 |
—實例—
none:沒有任何屬性。
【高斯模糊】 .blur {-webkit-filter: blur(4px);filter: blur(4px);}
【明暗度】.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
【對比度】.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
【灰度】.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
【色相旋轉】.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
【反相】.invert {-webkit-filter: invert(100%);filter: invert(100%);}
【透明度】.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
【飽和度】.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
【深褐色】.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
【陰影】 .shadow {-webkit-filter: drop-shadow(8px 8px 10px #000);filter: drop-shadow(8px 8px 10px #000);}
當然，多個屬性一起用的話，可以寫在一起：比如.multiply{-webkit-filter:drop-shadow(8px 8px 10px #000) hue-rotate(500deg) grayscale(0.3) invert(0.2) brightness(1.2);}，以上屬性可以配合background屬性使用，能達到更加理想的效果。
—后記—
filter屬性目前只支持對於img的設置，對於background-image不支持此屬性，要達到背景虛化效果可以考慮把要做背景虛化的圖片放在父級div中，設置其屬性為position：absolute；再去設置相應的視覺效果。
以后有新內容我會再補充。
參考文章：http://www.runoob.com/cssref/css3-pr-filter.html
https://www.cnblogs.com/wangxiaosan/p/5933670.html