CSS圖片灰度濾鏡效果可以讓圖片變成黑白的效果，從而達到一些藝術效果或者UI上的需求，下面介紹一下如何實現。

img {
-webkit-filter: grayscale(100%); /* safari和chrome */
filter: gray; /* Firefox */
}

上述的代碼中，我們分別使用-webkit-filter和filter來設置灰度濾鏡，其中-webkit-filter是針對Safari和Chrome瀏覽器的，而filter是針對FireFox瀏覽器的。灰度值從0到100%之間，數值越大，圖像越灰。

如果我們想讓圖片在鼠標懸停時變回彩色，可以使用下面的代碼：

img:hover {
-webkit-filter: none; /* safari和chrome */
filter: none; /* Firefox */
}

上述代碼中使用了: hover偽類，當我們的鼠標懸停在圖片上時，會將灰度濾鏡效果去掉，恢復圖片的原色。

除此之外，我們還可以控制不同元素的濾鏡效果，比如對文本設置灰度效果等，代碼如下：

p {
-webkit-filter: grayscale(50%); /* safari和chrome */
filter: gray(50%); /* Firefox */
}

上述代碼中對<p>標簽設置50%的灰度效果，同樣的我們也可以對

總的來說，CSS圖片灰度濾鏡效果是一項非常實用的技術，能夠達到一些特定的UI效果，而且其實現也非常簡單，值得我們學習和應用。