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 legt ein Bild fest, das als Listenmarkierung verwendet wird.

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

Probieren Sie es aus

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

list-style-image: none;


  

    
NASA Notable Missions

    
    
      
  • Apollo
    • 
      
  • Hubble
    • 
      
  • Chandra
    • 
      
  • Cassini-Huygens
    • 
      
  • Spitzer
    • 
    

  




.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 Listenelemente angewendet, d.h. auf Elemente mit dem display: list-item; standardmäßig schließt dies

  • Elemente ein. Da diese Eigenschaft vererbt wird, kann sie auf dem Elternelement (normalerweise
      oder
        ) gesetzt werden, um auf alle Listenelemente anzuwenden.

    • Syntax

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

/*  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

    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
    Animationstypdiskret

    Formale Syntax

    list-style-image = 
        |
      none     

     = 
             |
        

     = 
        |
        

     = 
      url(  * )  |
                            

     = 
      src(  * )

    Beispiele

    Verwendung eines url-Wertes

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

    HTML

    html
      
  
    • Item 1
      • 
  
    • Item 2
      •

    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
      
  
    • Item 1
      • 
  
    • Item 2
      •

    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