CSS背景圖片是實(shí)現(xiàn)網(wǎng)頁(yè)美觀的重要元素之一，但是面對(duì)不同尺寸的設(shè)備時(shí)，如何使背景圖片在拉伸的同時(shí)保持居中呢？下面我們來(lái)介紹一下實(shí)現(xiàn)的方式。

/* HTML代碼 */
<div class="box"></div>
/* CSS樣式 */
.box {
background-image: url(bg.jpg); /* 背景圖片 */
background-size: cover; /* 圖片自適應(yīng)尺寸 */
background-position: center; /* 圖片水平、垂直居中 */
height: 400px; /* 高度 */
}

上述代碼中，我們通過(guò)在.box選擇器中添加了background-size屬性，使背景圖片能夠自適應(yīng)盒子的大小，并在background-position屬性中設(shè)置水平、垂直居中，從而保證拉伸時(shí)背景圖片的位置不會(huì)發(fā)生偏移，始終處于中心位置。

使用這種方式不僅能夠讓背景圖片在不同尺寸的設(shè)備上都能夠保持居中，而且還能夠適應(yīng)不同屏幕的分辨率，實(shí)現(xiàn)良好的響應(yīng)式設(shè)計(jì)。

當(dāng)然還有其他的實(shí)現(xiàn)方式，比如使用background-position與background-size屬性的數(shù)值配合，或者利用CSS3的transform屬性進(jìn)行移動(dòng)等，可以視情況靈活運(yùn)用。