CSS設置圖片黑白

眾所周知，CSS可以對網頁中的圖片進行各種各樣的處理，其中一種就是將彩色圖片轉化為黑白圖片。下面將詳細介紹如何通過CSS設置圖片黑白。

首先，我們需要使用`filter`屬性。這個屬性可以對元素進行濾鏡處理，其中的`grayscale`值可以設置圖片的灰度值，取值范圍為0~100%，值越高表示灰度越重。

img{
filter: grayscale(100%);
}

按照上面的寫法就可以將圖片設置成黑白的效果。

但是如果我們只想將圖片的某一個區域設置為黑白呢？這個時候就需要使用`mask-image`屬性了。這個屬性可以設置遮罩圖像，可以將一張黑白的圖片設置為遮罩層，這樣在與原圖疊加時，就會出現局部黑白的效果。

img{
-webkit-mask-image: url(mask.png);
mask-image: url(mask.png);
}

上面的代碼中，`-webkit-mask-image`和`mask-image`分別針對webkit和其他瀏覽器。其中的`mask.png`是需要設置的黑白圖片。

注意：部分老舊瀏覽器不支持filter和mask-image屬性，因此在使用時需要注意兼容性。