CSS3中提供了圖片置灰的效果，實現起來非常簡單。

img {
filter: grayscale(1);
-webkit-filter: grayscale(1); /* Safari 6.0 - 9.0 */
}

代碼中使用grayscale(1)來表示將圖片置灰，數值可以在0到1之間，0表示不置灰，1表示完全置灰。

同時為了兼容Safari瀏覽器，我們還需要加上-webkit-filter的聲明。

在實際應用中，我們可以通過hover等事件來實現鼠標懸浮時圖片變為彩色的效果：

img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
}

代碼中將置灰的數值改為0，即可將圖片還原為彩色。

圖片置灰可以為頁面增加一些特殊的視覺效果，可以在設計中得到廣泛的應用。