CSS是前端開發中常用的技術，它可以實現各種各樣的效果，比如實現圖片黑白效果。下面就來介紹如何用CSS實現圖片黑白效果圖。

/*將圖片轉為黑白*/
img {
filter: grayscale(100%);
}

上述代碼中，filter屬性是CSS3新增的屬性，它可以定義元素的濾鏡效果。其中grayscale函數可以將圖片轉換為灰度圖像。在該函數中，數值為0表示完全保留原色，數值為100%表示完全灰度。我們將數值設為100%，就可以將圖片轉化為灰度圖像了。

/* 鼠標懸浮在圖片上時，恢復原來的顏色 */
img:hover {
filter: none;
}

上述代碼實現了鼠標懸浮在圖片上時，圖片恢復原來的顏色。通過:hover選擇器選擇圖片，使用filter屬性設置值為none，即可取消原來的濾鏡效果，實現圖片顏色的恢復。

通過上述代碼的實現，我們可以很方便地實現圖片黑白效果圖，通過鼠標懸浮還可以快速查看原來的圖片。在實際開發中，可以根據需求進行調整，添加更多的效果，讓頁面更加豐富多彩。