卡卡網(wǎng)

本文介紹10款CSS濾鏡，在濾鏡的作用下，圖片將變得更加豐富多彩。

demodownload

下面介紹這10款CSS濾鏡屬性。

filter: blur()

模糊度，給圖像設(shè)置高斯模糊。

基本語(yǔ)法： filter: blur(radius)

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

/* 無(wú)變化 */
filter: blur(0);
/* 設(shè)置圖像高斯模糊2個(gè)像素融合 */
filter: blur(2px);
/* 設(shè)置圖像高斯模糊5個(gè)像素融合 */
filter: blur(5px);

filter: grayscale()

灰度模式。用來(lái)設(shè)置圖像或者元素的灰度模式，也就是去掉所有顏色以灰色顯示元素

基本語(yǔ)法： filter:grayscale(val)

val ：值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無(wú)變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0，同時(shí)也可以去0-1之間小數(shù)；取值為百分比，0%時(shí)為元素默認(rèn)狀態(tài)，100%時(shí)元素為黑白圖像。

/* 100%灰度 */
filter:grayscale(1);
/* 50%灰度 */
filter:grayscale(0.5);
/* 0%灰度 */
filter:grayscale(0);

filter:sepia()

將圖片或者元素以褐色的形式顯示，也就是復(fù)古效果。

基本語(yǔ)法： filter:sepia(val)

val ：值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無(wú)變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0，同時(shí)也可以去0-1之間小數(shù)；

/* 0%深褐色 */
filter:sepia(0);
/* 10%深褐色 */
filter:sepia(10%);
/* 100%深褐色 */
filter:sepia(100%);

filter: saturate()

飽和度。用于設(shè)置圖像的飽和度。

基本語(yǔ)法： filter: saturate(val)

val ：取值為0%則是完全不飽和，值為100%則圖像無(wú)變化。其他值，則是效果的線性乘子。超過100%的值是允許的，則有更高的飽和度。 若值未設(shè)置，值默認(rèn)是1，同時(shí)也可以去0-1之間小數(shù)。

/* 0%深褐色 */
filter:saturate(0);
/* 10%深褐色 */
filter:saturate(10%);
/* 100%深褐色 */
filter:saturate(100%);

filter: hue-rotate()

給圖像應(yīng)用色相旋轉(zhuǎn)。

基本語(yǔ)法： filter: hue-rotate(angle)

angle ：用于設(shè)定圖像被調(diào)整的色環(huán)角度值。值為0deg，則圖像無(wú)變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。

/* 無(wú)變化 */
filter: hue-rotate(0deg);
/* 色相旋轉(zhuǎn)30度 */
filter: hue-rotate(30deg);
/* 色相旋轉(zhuǎn)360度 */
filter: hue-rotate(360deg);

filter: invert()

給圖片進(jìn)行反轉(zhuǎn)取色顯示。

基本語(yǔ)法： filter: invert(val)

val ：取值為100%表示完全反轉(zhuǎn)。值為0%則圖像無(wú)變化。值在0%和100%之間。 若值未設(shè)置，值默認(rèn)是0。，同時(shí)也可以去0-1之間小數(shù)。

/* 無(wú)變化 */
filter: invert(0);
/* 取反30% */
filter: invert(30%);
/* or */
filter: invert(.3);

filter: opacity()

透明度。給圖像或者元素設(shè)置透明度，該函數(shù)與已有的opacity屬性很相似，不同之處在于通過filter，一些瀏覽器為了提升性能會(huì)提供硬件加速。

基本語(yǔ)法： filter: opacity(val)

val ： 取值為0%則是完全透明，值為100%則圖像無(wú)變化。值在0%和100%之間。 若值未設(shè)置，值默認(rèn)是1。

/* 無(wú)變化 */
filter: opacity(0);
/* 透明度30% */
filter: opacity(30%);
/* or */
filter: opacity(.3);

filter: brightness()

亮度。用于設(shè)置圖像的亮度，給圖片應(yīng)用一種線性乘法，使其看起來(lái)更亮或更暗。

基本語(yǔ)法： filter: brightness(val)

val ： 取值如果是0%，圖像會(huì)全黑。取值是100%，則圖像無(wú)變化。其他的值對(duì)應(yīng)線性乘數(shù)效果。值超過100%也是可以的，圖像會(huì)比原來(lái)更亮。如果沒有設(shè)定值，默認(rèn)是1。

/* 無(wú)變化 */
filter: brightness(0);
/* 圖像變暗70% */
filter: brightness(30%);
/* or */
filter: brightness(.3);

filter: contrast()

對(duì)比度。用于設(shè)置圖像的對(duì)比度，

基本語(yǔ)法： filter: contrast(val)

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

/* 無(wú)變化 */
filter: contrast(0);
/* 圖像對(duì)比度變暗70% */
filter: contrast(30%);
/* or */
filter: contrast(.3);

filter: drop-shadow()

投影。設(shè)置圖像或元素的投影效果，他和box-shadow效果一樣，但是區(qū)別在于他不能使用inset設(shè)置內(nèi)陰影，也不能同時(shí)這只多個(gè)陰影。

基本語(yǔ)法： filter: drop-shadow(offset-x offset-y blur-radius color);

• offset-x：設(shè)置投影的x軸的投影大小，取正直為投影像右偏移，取負(fù)值為投影像左偏移；
• offset-y：設(shè)置投影的Y軸的投影大小，取正直為投影像下偏移，取負(fù)值為投影像上偏移；
• blur-radius：表示投影的模糊半徑值，值越大表示投影越模糊并且越大，取0表示投影不進(jìn)行模糊處理，此屬性不支持負(fù)數(shù)；
• color：表示投影的顏色，可以使用顏色關(guān)鍵字(red)，十六進(jìn)制法(#fff)，rgb，rgba等寫法；

/* 只設(shè)置offset-x */
filter: drop-shadow(10px 0 0 red);
/* 只設(shè)置offset-y */
filter: drop-shadow(0 10px 0 #c00);
/* 只設(shè)置blur-radius */
filter: drop-shadow(0 0 10px rgb(255, 0, 0, .5))
/* 同時(shí)設(shè)置 */
filter: drop-shadow(10px 20px 20px rgba(0, 0, 0, .5))

總結(jié)

本文介紹了圖片常用到的10款CSS濾鏡，CSS濾鏡的出現(xiàn)使我們?cè)诰W(wǎng)站中想要輕松實(shí)現(xiàn)這些效果變得可能。只需要通過filter濾鏡的各種屬性就能輕松實(shí)現(xiàn)。

標(biāo)簽: CSS濾鏡