Básicamente es una imagen que es una colección de diferentes imágenes juntas para formar una sola imagen. El uso de sprites de imagen se realiza por dos razones principales:
- Para una carga de página más rápida, ya que use solo una imagen.
- Reduce el ancho de banda utilizado para cargar múltiples imágenes. De esta manera se consumen menos datos.
Los sprites de imagen se utilizan generalmente para diseñar una barra gráfica de redes sociales o una barra de navegación para hacerla más atractiva y eficiente al mismo tiempo. Es solo un método en HTML y CSS para implementar una forma más eficiente de colocar imágenes y diseñar páginas web.
Imagen usada:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 100px;
display: block;
}
.gfg {
width: 100px;
left:0px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -0px -0px;
}
.gfg1 {
width: 100px;
left:120px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -0px -140px;
}
.gfg2 {
width: 100px;
left:240px;
background: url(
'https://media.geeksforgeeks.org/wp-content/uploads/icon.png') -300px -140px;
}
</style>
</head>
<body>
<ul id="navlist">
<li class = "gfg"><a href="#"></a></li>
<li class = "gfg1"><a href="#"></a></li>
<li class = "gfg2"><a href="#"></a></li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por RahulRanjan4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA