CSS-Eigenschaft list-style-image

Die Eigenschaft list-style-image wird verwendet, um ein Bild anstelle der Markierung des Listenelements einzustellen.

Wenn das Bild eine eigene Breite und Höhe hat, sind die verwendete Breite und Höhe die zugehörige Breite und Höhe.

Die Eigenschaft list-style-image wird auf Listenelemente und Elemente, deren Eigenschaft display auf "list-item" eingestellt ist, angewendet. Standardmäßig beinhaltet es die Elemente <li>. Es kann auch auf die übergeordneten Elemente angewendet werden: <ol> oder <ul>.

Die Eigenschaft list-stylel-type wird verwendet, wenn das Bild nicht verfügbar ist, um angezeigt zu werden.

Anfangswert	none
Gilt für	Listenelemente
Geerbt	Ja
Animierbar	Nein
Version	CSS1
DOM Syntax	object.style.listStyleImage = "url("image.jpg")";

Syntax

list-style-image: none | url | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokumentst</title>
    <style>
      ul {
      list-style-image: none;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style-image</h2>
    <ul>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
  </body>
</html>

Versuch es selber!

Hier ist ein weiteres Beispiel, bei dem die URL-Quell des Bildes angehängt ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul {
      list-style-image: url("/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style-image</h2>
    <ul>
      <li>Listenelement 1</li>
      <li>Listenelement 2</li>
      <li>Listenelement 3</li>
    </ul>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
none	Bedeutet, dass kein Bild angezeigt wird. Anstelle des Bildes wird der Listenmarker, der mit der Eigenschaft list-stylel-type definiert ist, angezeigt. Es ist der Standardwert dieser Eigenschaft.
url	Ist verwendet, um die URL-Quell des Bildes, die als Markierung für Listeneinträge verwendet wird, anzugeben.
initial	Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit	Der Wert erbt die Eigenschaft von seinem übergeordneten Element.