CSS圖片顏色濾鏡給圖像加上視覺效果，更好地傳達(dá)信息。通過改變圖像的顏色、飽和度和明度等參數(shù)，來應(yīng)用濾鏡效果。

img {
filter: grayscale(100%); /* 灰度濾鏡 */
}
img:hover {
filter: sepia(100%);  /* 棕褐色濾鏡 */
}

為了使用這個(gè)濾鏡效果，你需要設(shè)置 CSS 的 filter 屬性，然后指定要使用的濾鏡函數(shù)。在上面的例子中，我們使用灰度濾鏡將圖片轉(zhuǎn)換為黑白色系。而當(dāng)鼠標(biāo)懸停在圖片上時(shí)，我們會(huì)應(yīng)用棕褐色濾鏡效果。

.img-container {
filter: invert(100%);
}
.img-container img {
filter: invert(100%); /* 重置圖片顏色為正常 */
transition: filter 0.5s ease; /* 添加平滑過渡效果 */
}
.img-container:hover img {
filter: none; /* 移除圖片濾鏡 */
}

在這個(gè)例子中，我們應(yīng)用了反轉(zhuǎn)濾鏡效果。但是反轉(zhuǎn)濾鏡會(huì)不僅應(yīng)用于圖片，也會(huì)應(yīng)用于其包裝的過渡容器 .img-container。因此，我們重置了圖片的顏色，然后再對其添加一個(gè)過渡動(dòng)畫。而在懸停時(shí)，我們將移除所有濾鏡效果，保留圖片正常狀態(tài)。