css: How to set the image background in list-style-image?

As shown in the picture, the bullets on the left are made from pictures, but now they are misplaced. How to set the margins of images?

Not usedlist-style-image This attribute
Usedbackground: url(1.png) no-repeat 74px;

Haha, I did use the wrong attribute. It would be better to use the li background or the li a background to simulate the list-type-image. At least the positioning is not that difficult.

Hmm . I haven't used list-type-image much before, thinking it has a positioning function. It still doesn't seem to work now.

Is it possible to accumulate the file names of background pictures one by one:

For example, there are 10 LIs, and the background pictures are from icon1.gif to icon10.gif respectively. These background pictures must be in li Shown before. Can it be implemented by just defining a CSS? Do I have to define 10 calls one by one?

/*-----------------------------------.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;
}

If you don’t have to define them one by one, then connect 10 pictures into a vertical string to make a picture---->
The next two methods are:
1 .Use the picture as the background of ul, spacing + picture height = line-height of li. Disadvantages: You have to make sure you don’t break the bank.
2. Use js to determine which li appears, and assign the value corresponding to "*" in background-position:*px;.
--------------------
Benefits: Images only need to be requested once from the server, which is very important for large sites.

The above is the detailed content of css: How to set the image background in list-style-image?. For more information, please follow other related articles on the PHP Chinese website!