CSS設(shè)置多個(gè)背景圖的方法

在CSS中，我們可以使用background-image屬性來設(shè)置多個(gè)背景圖，這個(gè)屬性接受一個(gè)圖像路徑作為參數(shù)，我們可以列出多個(gè)圖像路徑，用逗號(hào)隔開，來設(shè)置多個(gè)背景圖。

下面是一個(gè)示例代碼：

div {
  background-image: url(image1.png), url(image2.png), url(image3.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat;
}

在這個(gè)示例中，我們?cè)O(shè)置了一個(gè)div元素的背景圖，我們列出了三個(gè)圖像路徑，分別用逗號(hào)隔開，我們使用background-position屬性來設(shè)置每個(gè)背景圖的位置，在這個(gè)例子中，***個(gè)背景圖位于左邊，第二個(gè)背景圖位于右邊，第三個(gè)背景圖位于中心，我們使用background-repeat屬性來設(shè)置每個(gè)背景圖的重復(fù)方式，在這個(gè)例子中，***個(gè)和第二個(gè)背景圖不重復(fù)，第三個(gè)背景圖重復(fù)。

需要注意的是，如果瀏覽器不支持background-image屬性，那么上述代碼將不起作用，我們應(yīng)該在使用這個(gè)屬性之前，先檢查瀏覽器是否支持它，可以使用JavaScript中的CSSStyleSheet.insertRule()方法來動(dòng)態(tài)添加CSS規(guī)則，以確保兼容性。