CSS img變色是網頁設計中常用的效果之一。通過 CSS 將圖片對象加入動態交互中來，能夠有效提升網站的視覺效果，使網站更加生動活潑。接下來，本文將介紹如何使用 CSS 在網頁中實現 img變色效果。

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

以上是兩種常見的 img 變色效果 CSS 代碼。在 hover 狀態下，將圖片變為灰度色，營造出一種沉淀感，增加熟悉感；而在 active 狀態下，將圖片變成深棕色，能夠營造出一種發黃的舊照片的感覺。

此外，還有其他的圖片變色方式，如使用 transition 屬性實現漸變變色，或者使用 mix-blend-mode 屬性實現混合模式的參數設置，達到驚艷的效果。

img:hover {
mix-blend-mode: screen;
}

上述代碼通過混合模式指定為 screen，可以將 hover 狀態下的圖片中某些顏色混合為屏幕的透明色。這種方式適合用于科技、信息類網站，能夠突顯數據的多元、現代感。

總之， CSS img 變色是網頁設計中不可或缺的一部分，可提高網頁的美觀程度，也能夠向用戶傳達一些不同的信息。希望通過本文的介紹，讀者可以更好地利用 CSS 實現 img 變色效果。