本文目錄導(dǎo)讀：

1. 背景圖片的設(shè)置
2. 背景圖片的定位和拉伸

CSS3背景圖片處理：如何居中顯示并拉伸背景圖片？

背景圖片的設(shè)置

在CSS3中，我們可以通過(guò)background-image屬性來(lái)設(shè)置網(wǎng)頁(yè)的背景圖片，我們可以設(shè)置多張背景圖片，通過(guò)逗號(hào)分隔每個(gè)圖片的URL。

body {
    background-image: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');
}

背景圖片的定位和拉伸

當(dāng)我們?cè)O(shè)置多張背景圖片時(shí)，默認(rèn)情況下，這些圖片會(huì)按照設(shè)置的順序堆疊顯示，如果我們想要只拉伸中間的圖片，可以通過(guò)background-position和background-size屬性來(lái)實(shí)現(xiàn)。

我們需要通過(guò)background-position來(lái)定位中間的圖片，我們可以將中間的圖片定位在中心位置：

body {
    background-image: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');
    background-position: center, center, center; /* 定位中間的圖片 */
}

我們可以通過(guò)background-size屬性來(lái)拉伸中間的圖片，我們可以將中間的圖片設(shè)置為覆蓋整個(gè)容器：

body {
    background-size: auto, cover, auto; /* 拉伸中間的圖片 */
}

這樣，中間的圖片就會(huì)拉伸以覆蓋整個(gè)容器，而不會(huì)影響其他圖片的定位和顯示，注意，這種方法可能不適用于所有情況，具體效果還需要根據(jù)實(shí)際的頁(yè)面布局和設(shè)計(jì)需求來(lái)調(diào)整，我們還需要注意瀏覽器的兼容性問(wèn)題，以確保在不同的瀏覽器中都能得到良好的顯示效果。