list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die list-style-image CSS Eigenschaft setzt ein Bild als Listenmarkierung.

Es ist oft bequemer, die Kurzform list-style zu verwenden.

Probieren Sie es aus

Hinweis: Diese Eigenschaft wird auf Listenelemente angewendet, d.h. Elemente mit display: list-item; standardmäßig schließt dies <li> Elemente ein. Da diese Eigenschaft vererbt wird, kann sie auf das Elternelement (normalerweise <ol> oder <ul>) gesetzt werden, um sie auf alle Listenelemente anzuwenden.

Syntax

css
/* Keyword values */
list-style-image: none;

/* <url> values */
list-style-image: url("star-solid.gif");

/* valid image values */
list-style-image: linear-gradient(to left bottom, red, blue);

/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

Werte

<image>

Ein gültiges Bild, das als Markierung verwendet werden soll.

none

Gibt an, dass kein Bild als Markierung verwendet wird. Wenn dieser Wert gesetzt ist, wird stattdessen die in list-style-type definierte Markierung verwendet. Dies ist der Standardwert für list-style.

Formale Definition

Anfangswertnone
Anwendbar aufListenelemente
VererbtJa
Berechneter WertThe keyword none or the computed <image>
Animationstypdiskret

Formale Syntax

list-style-image = 
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Beispiele

Verwendung eines URL-Werts

Dieses Beispiel hat einen Stern als Markierung, den wir mit der <url> Bildfunktion einfügen.

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

css
ul {
  list-style-image: url("star-solid.gif");
}

Ergebnis

Verwendung eines Gradienten

Dieses Beispiel hat einen CSS-Gradienten als Markierung, den wir mit der linear-gradient() Bildfunktion erstellen.

HTML

html
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

CSS

css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}

Ergebnis

Spezifikationen

Specification
CSS Lists and Counters Module Level 3
# image-markers

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
list-style-image
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch