在前端開發過程中，經常需要使用背景圖片來進行美化頁面。然而，在不同屏幕尺寸下，背景圖片的顯示效果往往會出現問題，這就需要使用 CSS 背景圖片自適應的技巧。 在 CSS 中，我們可以通過 background-size 屬性來設置背景圖片的大小。一般來說，我們可以將 background-size 設置為 cover，這樣背景圖片就會自動適應窗口大小，并覆蓋整個背景區域。下面是一段示例代碼：

.bg {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
}

在上面的示例代碼中，我們首先設置了背景圖片的路徑，然后通過 background-size 屬性將其設置為 cover。同時，我們還通過 background-position 屬性來使背景圖片始終保持在中心位置。 除了 cover 外，我們還可以使用 contain 屬性來自適應背景圖片。contain 的作用是使背景圖片完全顯示，而不會發生拉伸或裁剪。下面是一段示例代碼：

.bg {
background-image: url('background.jpg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

在上面的示例代碼中，我們將 background-size 設置為 contain，同時使用 background-repeat 屬性來防止背景圖片出現重疊。 需要注意的是，在使用 background-size 屬性時，我們應該始終保持背景圖片的比例，以確保顯示效果更加美觀。如果我們使用了不合適的比例，就可能會出現拉伸或裁剪的情況，影響用戶體驗。因此，在選擇背景圖片時，我們應該盡可能選擇具有合適比例的圖片。 通過以上介紹，相信讀者已經有了一定的了解關于 CSS 背景圖片自適應的技巧，希望大家在實際開發中能夠合理應用。