在CSS中，我們有時(shí)需要對(duì)一些元素進(jìn)行濾鏡效果的設(shè)置，來增強(qiáng)網(wǎng)頁的視覺效果。下面就介紹幾種常見的濾鏡效果的代碼。

/* grayscale 灰度濾鏡 */
.filter {
filter: grayscale(100%);
}

這個(gè)濾鏡效果將圖片轉(zhuǎn)換為黑白灰度圖，括號(hào)內(nèi)的參數(shù)100%表示完全轉(zhuǎn)換為灰度圖，可以根據(jù)需要自行調(diào)整。

/* blur 模糊濾鏡 */
.filter {
filter: blur(5px);
}

這個(gè)濾鏡效果將圖片進(jìn)行模糊處理，括號(hào)內(nèi)的參數(shù)5px表示模糊程度，可以根據(jù)需要自行調(diào)整。

/* brightness 亮度濾鏡 */
.filter {
filter: brightness(70%);
}

這個(gè)濾鏡效果將圖片的亮度進(jìn)行調(diào)整，括號(hào)內(nèi)的參數(shù)70%表示亮度值，可以根據(jù)需要自行調(diào)整，范圍為0%~100%。

/* contrast 對(duì)比度濾鏡 */
.filter {
filter: contrast(150%);
}

這個(gè)濾鏡效果將圖片的對(duì)比度進(jìn)行調(diào)整，括號(hào)內(nèi)的參數(shù)150%表示對(duì)比度值，可以根據(jù)需要自行調(diào)整，范圍為0%~100%。

/* sepia 褐色濾鏡 */
.filter {
filter: sepia(100%);
}

這個(gè)濾鏡效果將圖片設(shè)置為褐色調(diào)，括號(hào)內(nèi)的參數(shù)100%表示完全轉(zhuǎn)換為褐色調(diào)，可以根據(jù)需要自行調(diào)整。