CSS: Wie stelle ich den Bildhintergrund im List-Style-Image ein?

Wie auf dem Bild zu sehen ist, sind die Kugeln auf der linken Seite aus Bildern entstanden, aber jetzt sind sie verlegt. Wie stelle ich die Ränder von Bildern ein?

Verwenden Sie nicht list-style-image Dieses Attribut
Verwenden Sie Hintergrund: url(1.png) Nr -repeat 74px;

Haha, ich habe das falsche Attribut verwendet. Es wäre besser, li-Hintergrund oder li-Hintergrund zu verwenden, um ein Listenbild zu simulieren.

Hmm . Ich habe list-type-image noch nicht oft verwendet, weil ich dachte, dass es eine Positionierungsfunktion hat. Es scheint jetzt immer noch nicht zu funktionieren.

Ist es möglich, die Dateinamen von Hintergrundbildern einzeln anzusammeln:

Zum Beispiel gibt es 10 LIs und die Hintergrundbilder reichen von icon1.gif bis icon10.gif Hintergrundbilder müssen in li angezeigt werden. Kann es implementiert werden, indem einfach ein CSS definiert wird? Muss ich 10 Anrufe nacheinander definieren?

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

Wenn Sie sie einzeln definieren müssen, verbinden Sie 10 Bilder zu einer vertikalen Zeichenfolge, um ein Bild zu erstellen---->
Die nächsten beiden Methoden sind:
1 . Verwenden Sie das Bild als Hintergrund von ul, Abstand + Bildhöhe = Zeilenhöhe von li. Nachteile: Sie müssen darauf achten, dass Sie nicht Ihr Budget sprengen.
2. Bestimmen Sie mit js, welches li angezeigt wird, und weisen Sie den Wert zu, der dem „*“ in background-position:*px; entspricht.
--------------------
Vorteile: Bilder müssen nur einmal vom Server angefordert werden, was für große Websites sehr wichtig ist.

Das obige ist der detaillierte Inhalt vonCSS: Wie stelle ich den Bildhintergrund im List-Style-Image ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!