css : Comment définir l'arrière-plan de l'image dans list-style-image ?

Comme le montre l'image, les balles de gauche sont faites à partir d'images, mais elles sont maintenant égarées. Comment définir les marges des images ?

Ne pas utiliser list-style-image Cet attribut
Utiliser background : url(1.png) non -repeat 74px;

Haha, j'ai utilisé le mauvais attribut. Il serait préférable d'utiliser li background ou li a background pour simuler une image de type liste. Au moins, le positionnement n'est pas si difficile

<.>Hmm. Je n'ai pas beaucoup utilisé l'image de type liste auparavant, pensant qu'elle a une fonction de positionnement. Cela ne semble toujours pas fonctionner maintenant.

Est-il possible d'accumuler les noms de fichiers des images d'arrière-plan un par un :

Par exemple, il y a 10 LI, et les images d'arrière-plan vont de icon1.gif à icon10.gif. les images d'arrière-plan doivent être en li Montré avant. Peut-il être implémenté en définissant simplement un CSS ? Dois-je définir 10 appels un par un ?

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

Si vous devez les définir une par une, connectez 10 images en une chaîne verticale pour créer une image ---->

Les deux méthodes suivantes sont :
1 . Utilisez l'image comme arrière-plan de ul, espacement + hauteur de l'image = hauteur de ligne de li. Inconvénients : Il faut veiller à ne pas se ruiner.
2. Utilisez js pour déterminer quel li apparaît et attribuez respectivement la valeur correspondant au "*" dans
background-position:*px; --------------------
Avantages : Les images ne doivent être demandées qu'une seule fois au serveur, ce qui est très important pour les grands sites.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!