在網(wǎng)頁設(shè)計中,經(jīng)常需要對圖片進(jìn)行美化處理,一種簡單而有效的處理方式是通過CSS來改變圖片的顏色,以下是通過CSS改變圖片顏色的方法。
img{ filter: hue-rotate(90deg); /* 應(yīng)用90度色相旋轉(zhuǎn) */ }
上面的代碼中,我們使用CSS中的濾鏡屬性filter
,通過值hue-rotate(90deg)
來改變圖片的顏色。其中hue-rotate
表示色相旋轉(zhuǎn),取值范圍為0~360度,我們這里取90度,即將圖片的顏色從藍(lán)色變?yōu)榫G色。
如果我們想將圖片變成黑白色,可以這樣寫:
img{ filter: grayscale(100%); /*應(yīng)用100%灰度*/ }
上面代碼中,我們使用grayscale(100%)
來實(shí)現(xiàn)將圖片變成黑白色的效果。其中,grayscale
表示灰度,取值范圍為0~100%,我們這里取100%,即完全灰度。
除了上面的這些效果,CSS中還有其它可以改變圖片顏色的屬性和方法,例如sepia()
、brightness()
、contrast()
等等,有興趣的讀者可以自己嘗試一下。