CSS 圖片改顏色是一個(gè)十分有用的技能，在網(wǎng)頁設(shè)計(jì)中經(jīng)常會遇到這種需要改變圖片顏色的需求。 CSS 的 filter 屬性提供了一種簡單的方式來改變圖片的顏色效果。 我們可以使用 filter 屬性來設(shè)置圖片的濾鏡效果，實(shí)現(xiàn)圖片的顏色變化。同時(shí)，可以通過改變?yōu)V鏡屬性的值來改變圖片的顏色效果。 下面是 CSS 圖片改顏色的代碼示例：

img{
filter: grayscale(100%);
}
img:hover{
filter: grayscale(0%);
}

首先，我們使用 filter 屬性的 grayscale() 函數(shù)來實(shí)現(xiàn)將圖片變?yōu)榛疑Ｆ渲校瑓?shù)值 100% 表示完全灰度，0% 表示原始色彩。因此，在上面的代碼中，我們將圖片的濾鏡效果設(shè)置為 100%，即變成了黑白色的灰度圖片。 然后，我們使用 :hover 偽類選擇器來實(shí)現(xiàn)鼠標(biāo)懸停時(shí)恢復(fù)圖片原始色彩。當(dāng)鼠標(biāo)懸停在圖片上時(shí)，我們把濾鏡效果的值改變?yōu)?0%，從而實(shí)現(xiàn)圖片顏色的恢復(fù)。 在實(shí)際使用中，可以根據(jù)需要調(diào)整濾鏡效果的屬性值，實(shí)現(xiàn)更加豐富的圖片顏色效果。比如，可以使用 sepia() 函數(shù)來實(shí)現(xiàn)棕色降飽和度的效果，或使用 hue-rotate() 函數(shù)實(shí)現(xiàn)圖片顏色的旋轉(zhuǎn)。總之，通過使用 filter 屬性可以實(shí)現(xiàn)各種有趣的圖片顏色效果，讓網(wǎng)頁設(shè)計(jì)更加生動和豐富。