如何用CSS設(shè)置多個(gè)背景

CSS是一種強(qiáng)大的樣式表語(yǔ)言，可以用來設(shè)置網(wǎng)頁(yè)的外觀和樣式，設(shè)置背景是CSS中常見的一項(xiàng)功能，在CSS中，可以使用background屬性來設(shè)置元素的背景，包括背景顏色、背景圖片等，如果要設(shè)置多個(gè)背景，就需要一些額外的技巧。

可以使用background-image屬性來設(shè)置多個(gè)背景圖片，該屬性可以接收多個(gè)圖片路徑作為參數(shù)，每個(gè)路徑用逗號(hào)隔開。

div {
  background-image: url('image1.png'), url('image2.png');
}

上面的代碼會(huì)將image1.png和image2.png兩個(gè)圖片設(shè)置為div元素的背景，需要注意的是，多個(gè)背景圖片會(huì)按照從左到右的順序疊加顯示。

也可以使用background-repeat屬性來設(shè)置背景圖片的重復(fù)方式。

div {
  background-image: url('image1.png');
  background-repeat: no-repeat, repeat;
}

上面的代碼會(huì)將image1.png設(shè)置為div元素的背景，并且***張圖片不重復(fù)，第二張圖片重復(fù)。

除了設(shè)置背景圖片外，還可以使用background-color屬性來設(shè)置背景顏色。

div {
  background-color: red, blue;
}

上面的代碼會(huì)將div元素的背景顏色設(shè)置為紅色和藍(lán)色，需要注意的是，多個(gè)背景顏色會(huì)按照從左到右的順序疊加顯示。

CSS提供了多種設(shè)置多個(gè)背景的方法，可以根據(jù)具體需求選擇適合的方式。