CSS中的材料背景是一種非常有趣的設計效果，它可以讓你的網站更具有現代感和科技感。材料背景分為光澤材料背景和紋理材料背景兩種，接下來我們來分別介紹。

光澤材料背景

.material-background {
background-color: #fff;
background-image: linear-gradient(60deg, rgba(255, 255, 255, 0.5) 20%, transparent 20%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 70%, transparent 70%, transparent);
background-size: 22.62px 39.15px;
}

光澤材料背景的代碼如上所示，它是通過線性漸變實現的。在漸變中設置了一個60度的角度，然后按照20%、50%、70%的位置分別設置了rgba(255, 255, 255, 0.5)和transparent兩種顏色，最后通過background-size設置漸變的大小。

紋理材料背景

.material-background {
background-color: #fff;
background-image: url('texture.png');
}

紋理材料背景的代碼如上所示，其中background-image屬性指定了紋理圖片的路徑。使用紋理材料背景的時候需要注意圖片大小和背景顏色的搭配，使得整個頁面風格統一。

總的來說，CSS中的材料背景可以用來增加網站的設計感和品質感，選擇光澤或紋理材料背景應根據具體情況來選擇。在設置時還應注意背景與整個頁面風格的搭配。