CSS背景變灰色，是一種常用的網頁設計效果。借助CSS技術，可以快速實現頁面內容在某些情況下呈現灰色背景，為頁面制造出更好的視覺效果。

假設我們要將一個id為wrapper的div的背景變為灰色，可以采用以下樣式代碼： 
#wrapper{
background-color: #ccc;
}

上述代碼中，通過定義background-color屬性，將wrapper元素的背景色設置為灰色。通過修改該屬性值，還可以實現各種不同的灰色背景效果。

除了給指定元素設置背景顏色，還可以使用filter屬性，將所有頁面元素的背景變為灰色。下面是示例代碼：

*{
filter: grayscale(100%); /* 將所有元素的背景置為灰色 */
}

借助grayscale函數，可以控制網頁元素的顏色飽和度，從而實現背景顏色的變化。在實際項目中，可以根據需要調整函數參數，實現更好的視覺效果。

總之，在網頁設計中，使用CSS背景變灰色是一項必要的技能。掌握相關的樣式屬性和函數，能夠幫助開發者實現更具吸引力的網頁效果。