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>

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>

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.

Browser-Support

1.0+ 12.0+ 1.0+ 1.0+ 7.0+


Finden Sie das nützlich?

Ähnliche Artikel