Propiedad CSS list-style-image
La propiedad list-style-image se utiliza para colocar una imagen en lugar del marcador de elemento de lista.
Si la imagen tiene un ancho y alto intrínsecos, se utilizarán para el tamaño del marcador. Si la imagen tiene una relación de aspecto intrínseca y ya sea un ancho o alto intrínseco, la dimensión faltante se calculará a partir de la relación y la dimensión proporcionadas.
La propiedad list-style-image se aplica a los elementos de lista y a los elementos con display establecido en "list-item". De forma predeterminada, esto incluye los elementos <li>. También se puede establecer en los elementos padre: <ol> o <ul>.
INFO
La propiedad list-style-type se utilizará cuando la imagen no esté disponible para mostrarse.
| Valor inicial | none |
|---|---|
| Se aplica a | Elementos de lista. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.listStyleImage = 'url("image.jpg")'; |
Sintaxis
Sintaxis de la propiedad CSS list-style-image
list-style-image: none | <url> | image-set() | initial | inherit;Ejemplo de la propiedad list-style-image:
Ejemplo de la propiedad CSS list-style-image con el valor 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>Resultado
Ejemplo de la propiedad list-style-image con una URL de origen de imagen adjunta:
Ejemplo de la propiedad CSS list-style-image
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-image: url("https://es.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>Valores
| Valor | Descripción | Probarlo |
|---|---|---|
| none | Indica que no se mostrará ninguna imagen. En lugar de una imagen, se mostrará el marcador de lista definido con list-style-type. Es el valor predeterminado de esta propiedad. | Probarlo » |
<url> | Se utiliza para proporcionar la URL de origen de la imagen que se usará como marcador de elemento de lista. | Probarlo » |
| image-set() | Especifica un conjunto de imágenes que se pueden usar según el entorno de representación (por ejemplo, la resolución de pantalla). | Probarlo » |
| initial | Hace que la propiedad utilice su valor predeterminado. | Probarlo » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es la función de la propiedad 'list-style-image' en CSS?