<div>元素是HTML中最常用的容器元素之一，它是用來包裹其他HTML元素的。在Web開發中，我們經常需要為<div>元素設置背景圖片以美化頁面，但是遇到一個普遍的問題就是如何讓背景圖片自適應不同屏幕尺寸的設備。本文將簡要介紹<div>背景自適應的方法，并通過幾個代碼案例來詳細說明。

在設置<div>背景自適應之前，需要了解CSS中background屬性的幾個常用屬性。是background-size屬性，它用來設置背景圖片的尺寸大小。有兩個常用的取值，分別是contain和cover。contain表示將背景圖片等比例縮放至能夠完全容納在<div>元素中，且保持寬高比不變。cover表示將背景圖片等比例縮放至能夠覆蓋整個<div>元素，可能會有部分被裁剪。

是background-position屬性，它用來設置背景圖片的位置。有一些常用的取值，比如top left、top right、center等?？梢酝ㄟ^指定背景圖片在<div>元素中的位置來實現不同的布局效果。

下面是一個簡單的代碼案例，展示了如何讓背景圖片在<div>元素中居中顯示并保持寬高比不變：

<style>
 .container {
background-image: url('example.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
height: 400px;
 }
</style>
<br>
<div class="container"></div>

在上面的代碼中，我們創建了一個名為.container的<div>元素，并通過CSS樣式將背景圖片設置為example.jpg。background-repeat屬性設置為no-repeat，表示不重復平鋪背景圖片。background-size屬性設置為contain，將背景圖片等比例縮放至能夠完全容納在<div>元素中，且保持寬高比不變。background-position屬性設置為center，使背景圖片在<div>元素中居中顯示。width屬性設置為100%，使<div>元素寬度自適應父容器，height屬性設置為400px，使<div>元素高度固定為400像素。

另一個常用的背景自適應的案例是將背景圖片鋪滿整個<div>元素：

<style>
 .container {
background-image: url('example.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
 }
</style>
<br>
<div class="container"></div>

在上面的代碼中，我們通過將background-size屬性設置為cover，將背景圖片等比例縮放至能夠覆蓋整個<div>元素。background-position屬性設置為center，使背景圖片在<div>元素中居中顯示。width屬性設置為100%，使<div>元素寬度自適應父容器，height屬性設置為100vh，使<div>元素高度等于視口的高度。

來說，要實現<div>背景的自適應，我們可以根據具體需求選擇不同的背景屬性取值。通過設置background-size屬性可以控制背景圖片的尺寸大小，通過設置background-position屬性可以控制背景圖片的位置。可以根據具體情況進行調整，以在不同屏幕尺寸的設備上獲得理想的展示效果。

參考真實案例：

1. <a target="_blank">w3schools.com</a>

2. <a target="_blank">css-tricks.com</a>

3. <a target="_blank">smashingmagazine.com</a>

以上就是關于<div>背景自適應的簡要介紹及代碼案例的詳細說明。通過靈活運用CSS中的背景屬性，我們可以輕松實現讓<div>背景圖片在不同設備上自適應的效果。