En este artículo, aprenderemos a establecer una imagen o icono como la imagen <li> . Necesitamos establecer el tamaño de la imagen de la lista personalizada para que sea atractiva. Entonces, también aprenderemos las diferentes formas de cambiar el tamaño de la imagen de la lista personalizada.
Sintaxis: En este artículo, usaremos las siguientes propiedades CSS .
- background-image : agregaremos una imagen personalizada como imagen de fondo en los elementos de la lista.
li::before {
background-image: url("image_URL");
}
- background-size: Se utilizará para establecer el tamaño de la imagen de fondo.
li {
background-size: 20px;
}
Enfoque 1: Primero, estableceremos el ícono de la lista como imagen de fondo y podemos personalizar su tamaño usando la propiedad de alto y ancho .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>List icon</title>
<style>
li {
list-style: none;
}
/* Set the list image as background image*/
li::before {
content: '';
display: inline-block;
margin-right: 10px;
/* Height of the list image*/
height: 10px;
/* Width of the list image*/
width: 10px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20220607182945/geeksforgeeks.jpg");
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<ul>
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ul>
</body>
</html>
Producción:
En la imagen de salida anterior, los usuarios pueden ver la diferencia entre el tamaño de la imagen de estilo de lista cuando establecemos tamaños de 30 px y 10 px.
Enfoque 2: en este enfoque, estableceremos el tamaño de la imagen usando la propiedad de tamaño de fondo para el elemento <li> .
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>List icon</title>
<style>
/* Set the size of the list image using
the background-size property. */
li {
list-style: none;
padding: 10px 30px;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20220607182945/geeksforgeeks.jpg");
background-repeat: no-repeat;
background-position: left center;
background-size: 20px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<ul>
<li>Geeks</li>
<li>for</li>
<li>Geeks</li>
</ul>
</body>
</html>
Producción:
Los usuarios pueden ver la imagen de salida anterior para el tamaño de fondo: 20px .
Enfoque 3: configuramos la imagen personalizada separada para cada elemento de la lista y agregamos estilo a esa imagen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>List icon</title>
<style>
li {
display: flex;
flex-direction: row;
list-style: none;
}
.listImage {
margin: 2px;
width: 20px;
height: 20px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<ul>
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220607182945/geeksforgeeks-300x300.jpg"
class="listImage">
Geeks
</li>
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220607182945/geeksforgeeks-300x300.jpg"
class="listImage">
for
</li>
<li>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220607182945/geeksforgeeks-300x300.jpg"
class="listImage">
Geeks
</li>
</ul>
</body>
</html>
Producción:
Los usuarios pueden ver el resultado anterior después de configurar la imagen personalizada para cada elemento de la lista.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA