CSS圖像過濾器是CSS3的一項新特性,它可以為網頁中的圖片添加各種效果,比如模糊、灰度、透明、反相等等。這些效果可以使網站頁面更加美觀,增加網站的視覺效果,也可以增加網站的交互性。
img{ filter: blur(5px); }
以上代碼就是一個簡單的CSS圖像過濾器的例子,它會將圖片模糊化處理。下面是一些常用的CSS圖像過濾器:
img{ filter: grayscale(100%); /*變成黑白圖片*/ filter: sepia(100%); /*變成棕色色調*/ filter: blur(5px); /*模糊*/ filter: brightness(50%); /*調亮*/ filter: contrast(200%); /*調對比度*/ filter: hue-rotate(90deg); /*調色相*/ }
需要注意的是,CSS圖像過濾器目前只支持Chrome、Firefox和IE10及以上版本的瀏覽器。如果你的網站需要兼容老舊的瀏覽器,那么不要使用CSS圖像過濾器,可以考慮使用其他的方法,比如Photoshop在圖片處理后再顯示到網站上。
下一篇css大小動畫