CSS 列表是網頁設計中常用的元素之一，它可以展示出有序和無序的信息。有時候我們需要在列表中插入圖片，這時候我們可以利用 CSS 樣式來進行設置。 首先，我們需要在 HTML 代碼中添加一個列表，可以使用 ul 或 ol 標簽來進行定義列表。在列表中添加圖片，可以使用 li 標簽，在列表項中插入 img 標簽，指定圖片的地址。 例如下面的示例代碼：

<ul>
<li><img src="image.png" alt="圖片" /></li>
<li>列表項 1</li>
<li>列表項 2</li>
</ul>

以上代碼中，我們在第一個列表項中插入了一張圖片，地址為 "image.png"，并且添加了圖片的 alt 屬性。 為了使圖片能夠與文字對齊，我們可以使用 CSS 樣式來進行控制。可以使用 background-image 屬性來指定圖片的地址，同時需要設置列表項的寬度和高度為圖片的寬度和高度。 例如下面的示例代碼：

<style>
li {
background-image: url('image.png');
background-repeat: no-repeat;
background-position: 0 50%;
height: 100px;
width: 200px;
text-indent: -9999px;
}
</style>
<ul>
<li>列表項 1</li>
<li>列表項 2</li>
</ul>

以上代碼中，我們設置了 li 標簽的背景圖片為 "image.png"，同時設置了背景圖片不重復，垂直居中對齊，以及設置列表項的寬度和高度。由于圖片已經充當了文字內容，所以使用了 text-indent 屬性將文字縮進到看不見的地方。 使用 CSS 樣式插入圖片的列表可以為我們帶來更好的視覺效果，同時也能夠替代純圖片的方法，提高網頁性能和可訪問性。