css：list-style-image中的圖片背景如何設定？

如圖，左邊的項目符號是圖片做的，現在錯位了。怎麼設定圖片的邊距啊？

不用list-style-image  這個屬性 
用background: url(1.png) no-repeat 74px;

呵呵的確是用錯了屬性哦，用li背景或者是li a的背景來模擬list-type-image更好一些了，起碼定位沒有那麼困難

嗯。以前沒怎麼用list-type-image，以為它有定位的功能。現在看來還是不行。

有沒有可能讓背景圖片的檔名逐一累加：

例如有10個LI，背景圖片分別從icon1.gif 到icon10.gif，這些背景圖片都是要在li前面顯示。能不能只定義一個CSS實作出來？非得定義10個一個個的呼叫嗎？

/*-----------------------------------.top10-----------------------------------*/
#top10 li {
        line-height:160%;
        padding-left:24px;
        border-bottom:1px #ccc dashed;
        width:150px;
        overflow:hidden;
}
#top10 a:hover {
    color:#C90;
}
#top10 .top1 {
        background:url(images/top_1.gif) no-repeat left center;
}
#top10 .top1 a {
    color:#06f;
}
#top10 .top1 a:hover {
    color:#f60;
}
#top10 .top2 {
        background:url(images/top_2.gif) no-repeat left center;
}
#top10 .top2 a {
    color:#06f;
}
#top10 .top2 a:hover {
    color:#f60;
}
#top10 .top3 {
    background:url(images/top_3.gif) no-repeat left center;
}
#top10 .top3 a {
    color:#0066FF;
}
#top10 .top3 a:hover {
    color:#f60;
}
#top10 .top4 {
    background:url(images/top_4.gif) no-repeat left center;
}
#top10 .top5 {
    background:url(images/top_5.gif) no-repeat left center;
}
#top10 .top6 {
    background:url(images/top_6.gif) no-repeat left center;
}
#top10 .top7 {
    background:url(images/top_7.gif) no-repeat left center;
}
#top10 .top8 {
    background:url(images/top_8.gif) no-repeat left center;
}
#top10 .top9 {
    background:url(images/top_9.gif) no-repeat left center;
}
#top10 .top10 {
    background:url(images/top_10.gif) no-repeat left center;
}

非要不一個個定義，那就先把10張連成一垂直串，做成一張圖片---->
接下來有兩張方法：
1 .把圖片當作ul的背景，間距+圖片高度=li的line-height。壞處：你得保證li不折行。
2.用js判斷出現的第幾個li，分別賦予對應background-position:*px;裡「*」的值。
--------------------
好處：圖片只需去伺服器上請求一次，這點對大站點來說，是非常重要的。

以上是css：list-style-image中的圖片背景如何設定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！