類型

效果展示

實(shí)現(xiàn)方案

曝光

filter: brightness(200%);

對(duì)比度

filter: contrast(300%);

對(duì)比度的值設(shè)置的大一些會(huì)效果更明顯，所以可以根據(jù)實(shí)際情況調(diào)整數(shù)值。

高斯模糊

filter: blur(1px);

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

灰度

filter: grayscale(50%);

色相旋轉(zhuǎn)

filter: hue-rotate(-90deg);

色相旋轉(zhuǎn)可以設(shè)置順時(shí)針角度，也可以設(shè)置逆時(shí)針角度。

反轉(zhuǎn)

filter: invert(100%);

陰影效果

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

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

深褐色

filter: sepia(400%);

飽和度

filter: saturate(400%);

屬性名

描述

none

默認(rèn)值，沒有效果。

blur(px)

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

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ù)接受<shadow>(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow box-shadow屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速。

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。

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；