En este artículo, hemos proporcionado algunos elementos de la lista y la tarea es crear una lista de elementos con viñetas de imágenes. Esta tarea se puede realizar utilizando la propiedad list-style-image en CSS. Esta propiedad se utiliza para establecer la imagen que se utilizará como marcador de elementos de la lista.
Sintaxis:
list-style-image: url;
Ejemplo: el siguiente código ilustra cómo crear viñetas de imagen usando css.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create an image bullets in HTML?
</title>
<style>
ul {
list-style-image: url(
"https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
How to create an image bullets in HTML?
</h2>
<p>List of fruits</p>
<ul>
<li>apple</li>
<li>mango</li>
<li>banana</li>
<li>grapes</li>
<li>papaya</li>
</ul>
</body>
</html>
Producción
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA