在 CSS3 中，可以使用 background-image 屬性結合逗號分隔來為一個 div 設定多張背景圖片。 每張圖片還可以分別設定位置、大小、重複方式等。
div {
width: 500px;
height: 300px;
background-image:
url("image1.jpg"),
url("image2.png"),
url("image3.svg");
background-repeat: no-repeat, repeat-x, repeat;
background-position:
top left,
center bottom,
right 10px bottom 20px;
background-size:
200px 150px,
auto 50px,
contain;
}
解釋：
background-image: 使用逗號分隔列出多個圖片 URL。順序很重要，先列出的圖片在最底層，後列出的圖片在最頂層。background-repeat: 控制每張圖片的重複方式。同樣使用逗號分隔，與background-image中的圖片順序對應。常用的值有：no-repeat（不重複）、repeat（水平和垂直重複）、repeat-x（水平重複）、repeat-y（垂直重複）、space(透過調整圖片之間的間距來重複圖片，圖片本身不縮放)、round(透過縮放圖片來重複圖片，圖片會變形)。background-position: 設定每張圖片的位置。可以使用關鍵詞如top,bottom,left,right,center，也可以使用具體的畫素值或百分比。background-size: 設定每張圖片的大小。 可以使用關鍵詞cover（覆蓋整個容器，圖片可能會被裁剪）、contain（包含在容器內，圖片可能會留白）、或者使用具體的畫素值或百分比。auto表示圖片的原始大小。
示例解析：
上面的程式碼會為 div 設定三張背景圖片：
image1.jpg：位於左上角，大小為 200px 寬，150px 高，不重複。image2.png：位於底部中央，高度為 50px，寬度自動調整，水平重複。image3.svg：位於右下角，距離右邊 10px，距離底部 20px，大小設定為contain，即完整包含在容器內，水平和垂直重複。
注意事項：
- 圖片路徑要正確，可以使用相對路徑或絕對路徑。
- 屬性值的個數要與圖片個數對應，否則可能會導致樣式錯亂。
background-size的cover和contain關鍵詞非常實用，可以根據需要選擇。- 可以使用簡寫屬性
background來同時設定多個背景屬性，但為了程式碼清晰易懂，建議分開寫。
希望這個解釋能夠幫助你理解如何使用 CSS3 為 div 設定多張背景圖片.