在CSS中設置圖片的灰白格子效果非常簡單，只需通過使用CSS的“filter”屬性即可實現。在這個示例中，我們將向您展示如何使用CSS創建具有灰白格子效果的圖片。

/* CSS代碼 */
.grayScale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

以上代碼是將圖像轉換為灰度的基本樣式。它將圖像中的所有顏色轉換為灰色陰影，這是實現灰白格子的第一步。

/* CSS代碼 */
.grid {
background-image: linear-gradient(
to right,
#ccc 10%,
transparent 10%,
transparent 20%,
#ccc 20%,
#ccc 30%,
transparent 30%,
transparent 40%,
#ccc 40%,
#ccc 50%,
transparent 50%,
transparent 60%,
#ccc 60%,
#ccc 70%,
transparent 70%,
transparent 80%,
#ccc 80%,
#ccc 90%,
transparent 90%,
transparent 100%
),
linear-gradient(
to bottom,
#ccc 10%,
transparent 10%,
transparent 20%,
#ccc 20%,
#ccc 30%,
transparent 30%,
transparent 40%,
#ccc 40%,
#ccc 50%,
transparent 50%,
transparent 60%,
#ccc 60%,
#ccc 70%,
transparent 70%,
transparent 80%,
#ccc 80%,
#ccc 90%,
transparent 90%,
transparent 100%
);
background-size: 20px 20px;
}

這段代碼的作用是為圖像添加灰白格子。 前兩個線性漸變是從左上角到右下角和從右上角到左下角的。 這種漸變中的#ccc是灰色，透明色是透明的。 background-size屬性是設置格子的大小。

/* HTML代碼 */

最后，您需要將所需的類應用于圖像標簽。 圖片將經過灰度處理，并有灰白格子效果。

在本示例中，我們使用的是線性漸變來創建灰白格子，但您也可以嘗試使用其他方法來實現該效果。