CSS代碼可以讓我們輕松為圖片添加效果，例如變色效果。下面是一個簡單的示例：

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

這段代碼的意思是，當鼠標懸浮在圖片上時，將圖片變?yōu)楹诎咨瑫r增加亮度和飽和度。

讓我們來逐一解釋這段代碼。

首先，我們在選擇器中使用了元素，這意味著我們想要應用這個效果到所有的圖片上。

接著，在:hover偽類之后，我們使用了CSS的濾鏡功能來變換圖片的顏色。在這個例子中，我們使用了三種不同的濾鏡效果：

• grayscale()：把圖片變成黑白色。
• brightness()：增加圖片的亮度。
• saturate()：增加圖片的飽和度。

在每個濾鏡效果后面，我們使用了一個百分比值來指定濾鏡的強度，這個值可以根據(jù)需要進行調(diào)整。

在這個簡單的例子中，我們演示了如何使用CSS代碼為圖片添加效果。這些效果可以讓我們的網(wǎng)頁變得更加動人，同時也可以增強用戶體驗。