在Web開發中，列表是一個經常使用的HTML元素。我們經常需要在列表項中添加背景圖片以提高頁面的可視性。但是問題也隨之而來：當頁面縮放時，列表中的背景圖片并沒有繼續適應大小。這篇文章將介紹如何使用CSS使背景圖片自適應列表項的大小。

首先，我們需要在HTML中創建一個簡單的列表。下面是一個例子：

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

接下來，我們需要為列表項添加背景圖片。在這個例子中，我們將使用名為“bg.jpg”的圖片作為背景。下面是對CSS樣式表的擴展：

li {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover;
padding-left: 20px;
line-height: 45px;
}

在這段CSS代碼中，我們首先為列表項添加了一個背景圖片。然后我們通過設置background-repeat屬性為“no-repeat”禁止了背景圖片出現多次。接著，我們將background-size屬性設置為“cover”，該屬性可以使圖片自適應填充列表項的大小。最后，我們在padding-left屬性中添加了20像素的內填充，以使列表項的文本內容不會被背景圖片遮擋。

我們還可以通過line-height屬性控制文本的行高，使文本更好地與背景圖片配合。在這個例子中，我們將值設置為45像素。

現在，我們已經成功地將背景圖片自適應列表項的大小。無論頁面被放大還是縮小，列表項的背景圖片都會自動適應大小。

在這篇文章中，我們學習了如何使用CSS使背景圖片自適應列表項的大小。這個技巧可以使我們更方便地在列表中添加背景圖片，并使頁面在各種設備上都能呈現出最佳效果。