卡卡網(wǎng)

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

demodownload

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

filter: blur()

模糊度，給圖像設置高斯模糊。

基本語法： filter: blur(radius)

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

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

filter: grayscale()

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

基本語法： filter:grayscale(val)

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

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

filter:sepia()

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

基本語法： filter:sepia(val)

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

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

filter: saturate()

飽和度。用于設置圖像的飽和度。

基本語法： filter: saturate(val)

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

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

filter: hue-rotate()

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

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

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

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

filter: invert()

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

基本語法： filter: invert(val)

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

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

filter: opacity()

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

基本語法： filter: opacity(val)

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

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

filter: brightness()

亮度。用于設置圖像的亮度，給圖片應用一種線性乘法，使其看起來更亮或更暗。

基本語法： filter: brightness(val)

val ： 取值如果是0%，圖像會全黑。取值是100%，則圖像無變化。其他的值對應線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。

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

filter: contrast()

對比度。用于設置圖像的對比度，

基本語法： filter: contrast(val)

val ： 值是0%的話，圖像會全灰。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。

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

filter: drop-shadow()

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

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

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

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

總結(jié)

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

標簽: CSS濾鏡