現(xiàn)在人們越來越多地使用手機(jī)瀏覽網(wǎng)頁，而且不同的手機(jī)屏幕大小也各不相同。為了使網(wǎng)頁在不同的設(shè)備上都能夠完美地呈現(xiàn)，我們需要使用一些技巧來實(shí)現(xiàn)背景圖像的自適應(yīng)。

使用 CSS 的 background 屬性來設(shè)置背景圖像，可以使用以下代碼實(shí)現(xiàn)：

body {
background: url(background.jpg) no-repeat center center fixed;
background-size: cover;
}

上面的代碼將背景圖像設(shè)置為居中且不重復(fù)，同時固定位置。此外，還設(shè)置了背景圖片大小以覆蓋整個屏幕。如果沒有設(shè)置背景圖片大小，則圖片將在屏幕上居中顯示。

但是，這種方法并不能完全適應(yīng)不同分辨率的屏幕。為了適應(yīng)不同大小的設(shè)備，我們可以使用 CSS3 中的 media query 對不同的屏幕分別設(shè)置背景圖片的大小，如下所示：

@media only screen and (min-width: 480px) {
body {
background-size: 100%;
}
}
@media only screen and (min-width: 768px) {
body {
background-size: 100%;
}
}
@media only screen and (min-width: 992px) {
body {
background-size: 100%;
}
}
@media only screen and (min-width: 1200px) {
body {
background-size: 100%;
}
}

通過上面的代碼，我們?yōu)椴煌钠聊辉O(shè)置了不同的背景圖片大小。例如，在屏幕寬度小于 480 像素時，背景圖片將完全顯示，而在屏幕寬度超過 1200 像素時，背景圖片的大小也將完全適應(yīng)屏幕。

通過使用上述方法，我們可以輕松地實(shí)現(xiàn) CSS 背景的自適應(yīng)，從而使網(wǎng)頁在不同的設(shè)備上都能夠完美展示。