CSS3 Filter圖像濾鏡可以讓圖片展現出更加多樣化的效果,不再平淡無奇。下面讓我們一起來看看它的具體使用方法吧。
img { /* 灰度濾鏡效果 */ filter: grayscale(100%); } img { /* 模糊濾鏡效果 */ filter: blur(5px); } img { /* 反色濾鏡效果 */ filter: invert(100%); } img { /* 飽和度濾鏡效果 */ filter: saturate(200%); } img { /* 對比度濾鏡效果 */ filter: contrast(200%); } img { /* 色相旋轉濾鏡效果 */ filter: hue-rotate(180deg); } img { /* 透明度濾鏡效果 */ filter: opacity(50%); }
通過上述濾鏡效果的修改,我們可以得到非常獨特而且美觀的圖片展示效果,相信在日后的開發過程中,這些濾鏡將給我們帶來更多的驚喜。