CSS有序列表圖片是指列表前面顯示的數字或字母圖標，用于幫助用戶更好地理解列表的順序和結構。下面就來通過pre標簽顯示一些CSS代碼來演示一下如何設置CSS有序列表圖片。

/* 定義有序列表圖片樣式 */
ol {
list-style: none; /* 隱藏默認樣式 */
counter-reset: counter-name; /* 定義計數器，初始值為 0 */
}
li:before {
counter-increment: counter-name; /* 計數器增加 1 */
content: counter(counter-name) ". "; /* 顯示計數器和. */
}

對上方的代碼進行解釋，首先將ol元素的list-style值設為none，這樣便隱藏了默認的列表樣式。接下來，使用counter-reset屬性定義一個名字為counter-name的計數器，并把它的初始值設為0。最后，使用:before偽元素和counter-increment屬性讓每個li元素前面顯示計數器和點號。這里的counter(counter-name)表示顯示計數器counter-name的值，"." 表示顯示點號。

另外，如果希望顯示字母而不是數字，只需要將代碼中的counter-reset和counter-increment替換為字母形式即可，如下所示：

/* 定義帶字母的有序列表圖片樣式*/
ol {
list-style: none;
counter-reset: counter-name;
}
li:before {
counter-increment: counter-name;
content: counter(counter-name,lower-alpha) ". ";
/* lower-alpha 表示小寫字母，upper-alpha 表示大寫字母 */
}

使用這段代碼，我們可以實現有序列表圖片中顯示字母。代碼中，通過使用counter()函數中的lower-alpha參數將計數器值轉換為小寫字母。

綜上，CSS有序列表圖片可以方便地幫助用戶認知列表的順序和結構。通過使用list-style屬性和counter()函數，我們可以輕松地設置自定義的有序列表圖片樣式來滿足不同需求。