Propriété CSS list-style-image
La propriété list-style-image est utilisée pour afficher une image à la place du marqueur d'élément de liste.
Si l'image possède une largeur et une hauteur intrinsèques, elles seront utilisées pour la taille du marqueur. Si l'image a un ratio intrinsèque et soit une largeur soit une hauteur intrinsèque, la dimension manquante sera calculée à partir du ratio et de la dimension fournis.
La propriété list-style-image s'applique aux éléments de liste et aux éléments dont la propriété display est définie sur "list-item". Par défaut, cela inclut les éléments <li>. Elle peut également être définie sur les éléments parents : <ol> ou <ul>.
INFO
La propriété list-style-type sera utilisée lorsque l'image n'est pas disponible pour être affichée.
| Valeur initiale | none |
|---|---|
| S'applique à | Éléments de liste. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS1 |
| Syntaxe DOM | object.style.listStyleImage = 'url("image.jpg")'; |
Syntaxe
Syntaxe de la propriété CSS list-style-image
list-style-image: none | <url> | image-set() | initial | inherit;Exemple de la propriété list-style-image :
Exemple de la propriété CSS list-style-image avec la valeur none
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: none;
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Résultat
Exemple de la propriété list-style-image avec une URL de source d'image attachée :
Exemple de la propriété CSS list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://fr.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
}
</style>
</head>
<body>
<h2>List-style-image property example</h2>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| none | Indique qu'aucune image ne sera affichée. À la place de l'image, le marqueur de liste défini par list-style-type sera affiché. Il s'agit de la valeur par défaut de cette propriété. | Tester » |
<url> | Permet de fournir l'URL source de l'image qui sera utilisée comme marqueur d'élément de liste. | Tester » |
| image-set() | Spécifie un ensemble d'images pouvant être utilisées en fonction de l'environnement de rendu (par exemple, la résolution d'écran). | Tester » |
| initial | Définit la valeur par défaut de la propriété. | Tester » |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Quelle est la fonction de la propriété 'list-style-image' en CSS ?