CSS背景圖片在不同屏幕尺寸下的自適應是Web開發中常見的問題。不同的屏幕尺寸、設備像素密度、瀏覽器窗口大小等因素都可能影響到背景圖片的展示效果。本文將介紹幾種常用的方法來實現CSS背景自適應屏幕的效果。

方法一：使用CSS的background-size屬性來控制背景圖片的大小。background-size屬性可以使用百分比、像素、以及cover和contain等關鍵字來設置圖片的大小。例如，可以使用以下代碼將背景圖片填充滿整個容器：

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

方法二：使用CSS3的媒體查詢來根據不同的屏幕尺寸設置不同的背景圖片。例如，在窄屏幕下，我們可能想要使用一張更小的背景圖片來減少資源的加載。可以使用以下代碼來設置不同尺寸下的背景圖片：

.container {
background: url('bg-large.jpg') no-repeat center center fixed;
background-size: cover;
}
@media screen and (max-width: 768px) {
.container {
background: url('bg-small.jpg') no-repeat center center fixed;
background-size: cover;
}
}

方法三：使用CSS3的多背景圖語法來實現自適應背景。多背景圖語法允許我們在同一個元素上設置多個背景圖片，并按照優先級順序疊加展示。可以使用以下代碼來設置多個自適應背景：

.container {
background: url('bg-small.jpg') no-repeat center center fixed,
url('bg-large.jpg') no-repeat center center fixed;
background-size: contain, cover;
}

總結起來，實現CSS背景自適應屏幕的方法有很多種，我們可以根據具體的需求來選擇合適的方法。使用background-size屬性、媒體查詢以及多背景圖語法都是比較常用且有效的方法。