CSS是前端開(kāi)發(fā)中常用的樣式語(yǔ)言，能夠控制網(wǎng)頁(yè)的各種樣式，包括文字、顏色、大小、排版等等。在網(wǎng)站制作中，經(jīng)常會(huì)遇到需要在圖片上做交互效果的情況，比如點(diǎn)擊圖片后變色。

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

上述代碼使用:hover偽類(lèi)來(lái)實(shí)現(xiàn)鼠標(biāo)懸浮在圖片上時(shí)的效果，使用filter屬性來(lái)改變圖片的色彩，其中g(shù)rayscale(100%)可以將圖片變成灰白色，brightness(150%)可以增加亮度。

如果需要在圖片被點(diǎn)擊后變色，則需要在CSS代碼中加入click事件，具體實(shí)現(xiàn)如下：

img:active{
filter: grayscale(100%) brightness(150%);
}

上述代碼使用:active偽類(lèi)來(lái)實(shí)現(xiàn)當(dāng)圖片被點(diǎn)擊時(shí)的效果，同樣使用filter屬性來(lái)改變圖片的色彩。效果可以自行調(diào)整，比如改變?yōu)V鏡的值或調(diào)整色彩飽和度等等。

總結(jié)來(lái)說(shuō)，通過(guò)使用:hover和:active偽類(lèi)結(jié)合filter屬性，可以方便地在網(wǎng)站制作中實(shí)現(xiàn)圖片交互效果，從而提高用戶(hù)體驗(yàn)和頁(yè)面的互動(dòng)性。