En este artículo, vamos a aprender cómo podemos crear y usar Sprites de imagen CSS.
Los sprites de imagen CSS no son más que una forma de reducir las requests HTTP de los recursos de imagen. Un Sprite de imagen CSS es un archivo de imagen único que contiene todas las imágenes en una página de documento. Los sprites de imagen son ventajosos ya que los recursos de imagen solo tendrán que cargarse una vez.
Enfoque: Primero necesitamos crear una imagen que tenga todas las imágenes que queremos combinar en una usando cualquier editor de imágenes. Al principio, debemos agregar todos los divs o etiquetas de anclaje, el número de ellos será el mismo que el número de imágenes en ese sprite (generalmente). Luego, en la parte de estilo, necesitamos especificar la posición de fondo de los divs o las etiquetas de anclaje con el ancho o alto de las imágenes en el sprite. En este artículo, hemos creado una barra de navegación usando el sprite de imagen a continuación.
Propiedades utilizadas:
- background: Es una propiedad que se utiliza para agregar un fondo a cualquier elemento, puede ser un simple color o incluso puede ser una imagen.
- background-position: Esto especifica la posición de la imagen inicial de la imagen de fondo.
- position: Esta propiedad especifica el tipo de posicionamiento que tendrá un elemento. Toma valores como estáticos, relativos, absolutos, fijos o pegajosos.
- display: Esta propiedad define cómo se mostrará el elemento en la página web.
- izquierda: esta clase se usa para colocar elementos horizontalmente, esta clase solo funciona en un elemento cuya posición se establece en algún valor.
- ancho: esta clase se utiliza para especificar el ancho total de un elemento.
Ejemplo 1: El siguiente ejemplo muestra cómo podemos usar una imagen combinada como un sprite de imagen y hacer que la página web sea más eficiente al reducir las requests HTTP para imágenes separadas.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.sprite {
background: url("sprite.png") no-repeat;
width: 280px;
height: 200px;
display: inline-block;
}
.logo1 {
left: 0px;
width: 100px;
background-position: 0px 0px;
}
.logo2 {
left: 100px;
width: 111px;
background-position: -100px 0px;
}
.logo3 {
left: 200px;
width: 100px;
background-position: -211px 0px;
}
.logo4 {
left: 300px;
width: 100px;
background-position: -311px 0px;
}
body {
text-align: center;
}
h1{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div><h2>How to create and use CSS Image Sprites ?</h2></div>
<div class="sprite logo1"></div>
<div class="sprite logo2"></div>
<div class="sprite logo3"></div>
<div class="sprite logo4"></div>
</body>
</html>
Producción:
Ejemplo 2: aquí puede ver cómo podemos agregar etiquetas/enlaces de anclaje separados a las imágenes separadas en el sprite de la imagen.
HTML
<!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;
}
#home {
left: 0px;
width: 100px;
background: url('text.gif');
background-position: 0 0;
}
#prev {
left: 100px;
width: 200px;
background: url('text.gif');
background-position: -100px 0;
}
#next {
left: 200px;
width: 100px;
background: url('text.gif');
background-position: -200px 0;
}
h1{
color: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div><h2>How to create and use CSS Image Sprites ?</h2></div>
<ul id="navlist">
<li id="home"><a href=
"https://www.geeksforgeeks.org"></a></li>
<li id="prev"><a href=
"https://www.geeksforgeeks.org/data-structures/?ref=shm">
</a></li>
<li id="next"><a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms/?ref=shm">
</a></li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA