CSS list-style-image-Eigenschaft
Die CSS-Eigenschaft list-style-image wird verwendet, um ein Bild anstelle des Listenmarkierungssymbols einzufügen.
Wenn das Bild eine intrinsische Breite und Höhe hat, werden diese für die Größe der Markierung verwendet. Wenn das Bild ein intrinsisches Seitenverhältnis und entweder eine intrinsische Breite oder Höhe hat, wird die fehlende Dimension aus dem angegebenen Verhältnis und der Dimension berechnet.
Die Eigenschaft list-style-image wird auf Listenelemente und Elemente mit display auf „list-item“ angewendet. Standardmäßig umfasst dies <li>-Elemente. Sie kann auch auf den übergeordneten Elementen <ol> oder <ul> festgelegt werden.
INFO
Die Eigenschaft list-style-type wird verwendet, wenn das Bild nicht angezeigt werden kann.
| 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 für die 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
Beispiel für die 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("https://de.w3docs.com/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>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| none | Bedeutet, dass kein Bild angezeigt wird. Anstelle des Bildes wird das Listenmarkierungssymbol angezeigt, das mit list-style-type definiert ist. Dies ist der Standardwert dieser Eigenschaft. | Testen » |
<url> | Wird verwendet, um die Quell-URL des Bildes anzugeben, das als Listenmarkierungssymbol verwendet werden soll. | Testen » |
| image-set() | Gibt eine Reihe von Bildern an, die je nach Rendering-Umgebung (z. B. Bildschirmauflösung) verwendet werden können. | Testen » |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Funktion hat die Eigenschaft 'list-style-image' in CSS?