HTML5中的圖片濾鏡功能能夠使網(wǎng)頁設(shè)計更加豐富多彩。下面將介紹一些HTML5圖片濾鏡的代碼。

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

可以通過“blur”函數(shù)指定圖片的模糊半徑，如上例中的“5px”。

img {
filter: brightness(200%);        //亮度濾鏡 
}

“brightness”函數(shù)指定圖片亮度的變化程度，如上例中的“200%”表示增加200%的亮度。

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

“grayscale”函數(shù)可以將圖片變成灰度圖像，如上例中的“100%”表示完全變?yōu)榛叶葓D像。

img {
filter: hue-rotate(90deg);       //色相旋轉(zhuǎn)濾鏡
}

“hue-rotate”函數(shù)可以使圖片色相產(chǎn)生旋轉(zhuǎn)效果，如上例中的“90deg”表示順時針旋轉(zhuǎn)90度。

img {
filter: invert(100%);      //反轉(zhuǎn)濾鏡
}

“invert”函數(shù)可以將圖片反轉(zhuǎn)，如上例中的“100%”表示完全反轉(zhuǎn)。

上述代碼只是展示了部分HTML5圖片濾鏡的功能，更多效果可以嘗試查閱相關(guān)文獻(xiàn)。