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 ⁨Juli 2015⁩.

Die list-style-image CSS Eigenschaft legt ein Bild fest, das als Markierungselement für Listeneinträge verwendet wird.

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

Probieren Sie es aus

list-style-image: url("/shared-assets/images/examples/rocket.svg");

list-style-image: none;

<section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all unhighlighted" id="example-element"> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div> </section>

.default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; }

Hinweis: Diese Eigenschaft wird auf Listeneinträge angewendet, d.h. Elemente mit display: list-item; standardmäßig sind dies <li> Elemente. Da diese Eigenschaft vererbt wird, kann sie auf das übergeordnete Element (normalerweise <ol> oder <ul>) festgelegt werden, um sie auf alle Listeneinträge 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 wird.
none: Gibt an, dass kein Bild als Markierung verwendet wird. Wenn dieser Wert gesetzt ist, wird stattdessen die Markierung verwendet, die in list-style-type definiert ist. Dies ist der Standardwert für list-style.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Listenelemente
Vererbt	Ja
Berechneter Wert	The keyword `none` or the computed <image>
Animationstyp	diskret

Formale Syntax

list-style-image = 
 <image> |
 none 

<image> = 
 <url> |
 <image()> |
 <image-set()> |
 <cross-fade()> |
 <element()> |
 <gradient> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color>? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<image-tags> = 
 ltr |
 rtl 

<image-src> = 
 <url> |
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ]? 

<cf-image> = 
 [ <image> | <color> ] &&
 <percentage [0,100]>? 

<id-selector> = 
 <hash-token>

Beispiele

Verwendung eines url-Wertes

Dieses Beispiel hat einen Stern als Markierung, den wir mithilfe der Bildfunktion <url> einbinden.

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 Bildfunktion linear-gradient() 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

Siehe auch

list-style Kurzform
list-style-type Eigenschaft
list-style-position Eigenschaft
::marker Pseudo-Element
CSS-Listen und -Zähler Modul
CSS-Zählerstile Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden