類型

效果展示

實現方案

曝光

filter: brightness(200%);

對比度

filter: contrast(300%);

對比度的值設置的大一些會效果更明顯，所以可以根據實際情況調整數值。

高斯模糊

filter: blur(1px);

高斯模糊的效果，如果背景是圖片，值太大，圖片會看不清；如果是背景色，建議設置的值大一些，不然效果沒有那么明顯。

灰度

filter: grayscale(50%);

色相旋轉

filter: hue-rotate(-90deg);

色相旋轉可以設置順時針角度，也可以設置逆時針角度。

反轉

filter: invert(100%);

陰影效果

filter: drop-shadow(2px 0px 7px #26a1ec);

陰影效果使用box-shadow也可以實現，不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會提供硬件加速。

深褐色

filter: sepia(400%);

飽和度

filter: saturate(400%);

屬性名

描述

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。

saturate(%)

轉換圖像飽和度。值定義轉換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設置，值默認是1。

sepia(%)

將圖像轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；