CSS多張背景圖拼接的方法

在CSS中，我們可以使用background-image屬性來設(shè)置元素的背景圖像，如果要拼接多張背景圖，我們可以將多張圖片的路徑以逗號分隔的形式寫入該屬性中。

假設(shè)我們有一張圖片image1.jpg和另一張圖片image2.jpg，我們可以這樣寫：

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

這樣，div元素的背景就會先顯示image1.jpg，然后再顯示image2.jpg，需要注意的是，圖片的路徑可以是相對路徑，也可以是***路徑。

我們還可以使用background-position屬性來調(diào)整圖片的位置，我們可以將image1.jpg設(shè)置在左邊，將image2.jpg設(shè)置在右邊：

div {
  background-image: url(image1.jpg), url(image2.jpg);
  background-position: left, right;
}

這樣，div元素的背景就會顯示兩張圖片，并且image1.jpg在左邊，image2.jpg在右邊。

除了使用逗號分隔多張圖片外，我們還可以使用CSS的偽元素（pseudo-elements）來實現(xiàn)多張背景圖的拼接，我們可以使用:before和:after偽元素來分別設(shè)置背景圖片：

div:before {
  content: "";
  background-image: url(image1.jpg);
}
div:after {
  content: "";
  background-image: url(image2.jpg);
}

這樣，div元素的背景也會顯示兩張圖片，并且image1.jpg在左邊，image2.jpg在右邊，不過需要注意的是，使用偽元素設(shè)置背景圖片時，我們需要將偽元素的內(nèi)容設(shè)置為空字符串（""），否則會出現(xiàn)額外的空白區(qū)域。