css3中常用的樣式,有很多讓人驚嘆的效果。其中一種常見的應用是灰色濾鏡。當我們需要顯示灰色圖片,圖片的背景或者整面頁面的背景變成灰色的時候,我們可以使用灰色濾鏡來實現。
css3中通過filter屬性提供了灰色濾鏡效果,具體代碼如下:
img{ filter: grayscale(100%); }
上述代碼中,我們將圖片的filter屬性設置成grayscale(100%),即將其灰度值設置成100%,其它的值也可以控制圖片的灰度程度。代碼中的“%”表示可以是從0到100之間的數值。
如果需要將整面頁面上的背景或者某個元素的背景變成灰色,我們可以使用以下代碼:
.elem{ filter: grayscale(100%); }
上述代碼就可以將該元素的背景變成灰色,達到我們想要的效果。
需要注意的是,一些老版本的瀏覽器并不支持css3的灰色濾鏡效果,因此在使用時需要特別注意兼容性問題。
上一篇css3點擊伸縮代碼
下一篇css3濾鏡字體