CSS list-style-image Eigenschaft
Die CSS-Eigenschaft list-style-image ersetzt den Standard-Listenmarkierer durch ein Bild. Definition, Werte und Beispiele.
Die CSS-Eigenschaft list-style-image ersetzt den Standard-Listenmarkierer (Kreis, Disc oder Zahl) durch ein Bild Ihrer Wahl. Es ist die einfachste Methode, einem <ol> oder <ul> benutzerdefinierte Aufzählungszeichen zu geben – ein Häkchen, einen Pfeil, ein Symbol – ohne zusätzliches Markup hinzuzufügen.
Diese Seite erklärt, was die Eigenschaft bewirkt, welche Werte sie akzeptiert, wie der Markierer skaliert wird, häufige Fallstricke und wie sie in die list-style-Kurzschreibweise eingebunden wird.
Wann sollte man sie verwenden?
Verwenden Sie list-style-image, wenn Sie dekorative Aufzählungszeichen aus einem einzelnen, kleinen Bild möchten und keine genaue Kontrolle über Größe oder Abstände des Markierers benötigen. Wenn Sie präzise Kontrolle über den Markierer (Größe, Abstand, Ausrichtung) benötigen, ist der moderne Ansatz ein ::marker-Pseudo-Element oder ein background-image auf jedem <li> mit padding-left — list-style-image bietet keine Möglichkeit, das Bild zu skalieren, sodass eine zu große Grafik die Zeile dominiert.
Wie wird der Markierer skaliert?
Wenn das Bild eine intrinsische Breite und Höhe hat, werden diese direkt als Markierergröße verwendet. Hat das Bild ein intrinsisches Seitenverhältnis und nur eine intrinsische Dimension, wird die fehlende Dimension aus dem Verhältnis berechnet. Da es kein CSS gibt, um den Markierer zu skalieren, sollten Sie das Bild in der gewünschten Anzeigedimension vorbereiten (üblicherweise 16×16 oder kleiner).
Die Eigenschaft list-style-image gilt für Listenelemente und jedes Element, bei dem display auf list-item gesetzt ist. Standardmäßig betrifft das <li>-Elemente, aber Sie können sie auch auf dem übergeordneten <ol> oder <ul> setzen, wo sie von den Listenelementen geerbt wird.
Wenn das Bild nicht geladen werden kann, fällt der Markierer auf den Wert von list-style-type zurück (standardmäßig ein Disc). Behalten Sie immer einen sinnvollen list-style-type bei, damit fehlerhafte Bilder Ihre Liste nicht ohne Aufzählungszeichen lassen.
| Anfangswert | none |
|---|---|
| Gilt für | Listenelemente. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS1 |
| DOM-Syntax | object.style.listStyleImage = 'url("image.jpg")'; |
Syntax
Syntax der CSS-Eigenschaft list-style-image
list-style-image: none | <url> | image-set() | initial | inherit;Beispiel der list-style-image-Eigenschaft:
Beispiel der CSS-Eigenschaft list-style-image mit dem Wert none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: none;
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Ergebnis
![CSS list-style-image Eigenschaft](/uploads/media/default/0001/04/3253cd4b1e6f2bdbce6333da58573f6d8a9a0d53.png "CSS list-style-image none result" =420x)
Beispiel der list-style-image-Eigenschaft mit einer angehängten Quell-URL des Bildes:
Beispiel der CSS-Eigenschaft list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Verwendung der list-style-Kurzschreibweise
In der Praxis wird das Bild üblicherweise zusammen mit dem Markierertyp und der Position über die list-style-Kurzschreibweise gesetzt. Die beiden folgenden Regeln sind äquivalent:
/* Longhand */
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url("arrow.png");
}
/* Shorthand — type, position, image in any order */
ul {
list-style: square inside url("arrow.png");
}square hier ist der Fallback-Markierer, der verwendet wird, während das Bild geladen wird oder falls es nicht verfügbar ist. Siehe list-style-position für den Unterschied zwischen inside und outside.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
none | Es wird kein Bild angezeigt. Stattdessen wird der durch list-style-type definierte Markierer verwendet. Dies ist der Standardwert. | Ausprobieren » |
<url> | Die Quell-URL des Bildes, das als Listenmarkierer verwendet werden soll, geschrieben als url("path/to/image.png"). | Ausprobieren » |
image-set() | Eine Reihe von Bildkandidaten, aus denen der Browser je nach Renderingumgebung (z. B. Bildschirmauflösung) auswählt. Ermöglicht die Ausgabe eines schärferen Bildes für hochauflösende Displays. | Ausprobieren » |
initial | Setzt die Eigenschaft auf ihren Standardwert (none) zurück. | Ausprobieren » |
inherit | Erbt den Wert vom übergeordneten Element. |
Browser-Unterstützung und Barrierefreiheit
list-style-image wird von jedem modernen Browser unterstützt (sie existiert seit CSS1). Zwei Dinge sind zu beachten:
- Das Bild ist rein dekorativ – Screenreader kündigen es nicht an, und es gibt keinen
alt-Text. Kodieren Sie keine Bedeutung im Aufzählungszeichen, die nicht auch im Listentext vorhanden ist. - Die Markiererfarbe folgt der Text-
colorbeilist-style-type, aber ein Bild behält seine eigenen Farben. Wenn Sie möchten, dass das Aufzählungszeichen der Textfarbe entspricht, verwenden Sie stattdessen einen::marker- oderbackground-image-Ansatz.