在網(wǎng)頁設(shè)計中，很多時候我們需要對圖片進(jìn)行一些特效處理，比如設(shè)置圖片黑白。這時候，我們就需要運(yùn)用CSS技巧來實(shí)現(xiàn)圖片樣式的更改。下面是CSS設(shè)置圖片黑白的方法。

/* 將圖片設(shè)置為黑白 */
img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
/* 鼠標(biāo)移動到圖片上將圖片變回原圖 */
img:hover {
filter: none;
-webkit-filter: none;
}

通過上面的代碼可以看出，實(shí)現(xiàn)圖片黑白處理主要運(yùn)用的是CSS中的filter。其中，filter 可以實(shí)現(xiàn)很多的效果，而在這里，我們主要利用了它的 grayscale()方法，該方法可以將圖片變成黑白。同時，為了兼容不同瀏覽器，我們也可以使用 -webkit-filter這一前綴。

通過上述代碼，我們已經(jīng)成功地將圖片設(shè)置為黑白，但我們還需要解決一個問題。那就是當(dāng)鼠標(biāo)移動到圖片上時，圖片又變成了彩色。這是因為我們同時也為:hover狀態(tài)下的圖片設(shè)置了filter為none。這樣，當(dāng)鼠標(biāo)在圖片上hover時，就會將圖片濾鏡效果去除，從而實(shí)現(xiàn)了將圖片變回原圖。

總之，通過以上方法，我們就可以實(shí)現(xiàn)網(wǎng)頁中的圖片黑白處理，并且還可以實(shí)現(xiàn)鼠標(biāo)移動到圖片上時恢復(fù)原有圖片效果。希望這篇文章對大家有所幫助。