CSS3中提供了圖片置灰的效果，實(shí)現(xiàn)起來非常簡單。

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

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

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

在實(shí)際應(yīng)用中，我們可以通過hover等事件來實(shí)現(xiàn)鼠標(biāo)懸浮時(shí)圖片變?yōu)椴噬男Ч?/p>

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

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

圖片置灰可以為頁面增加一些特殊的視覺效果，可以在設(shè)計(jì)中得到廣泛的應(yīng)用。