Sprites de imagen CSS

Tabla de contenido

    Mostrar tabla de contenidos

Sprites de imagen

Un objeto de imagen es una colección de imágenes agrupadas en una sola imagen.

Una página web con muchas imágenes puede tardar mucho en cargarse y genera múltiples solicitudes de servidor.

El uso de sprites de imágenes reducirá la cantidad de solicitudes del servidor y ahorrará banda ancha.

Sprites de imagen: ejemplo sencillo

En lugar de usar tres imágenes separadas, usamos esta única imagen ("img_navsprites.gif"):

Con CSS, podemos mostrar solo la parte de la imagen que necesitamos.

En el siguiente ejemplo, el CSS especifica qué parte del "img_navsprites.gif" imagen para mostrar:

Ejemplo

#home
{
   
width: 46px;
  height: 44px;
   
background: url(img_navsprites.gif) 0 0;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

#next {
  width: 43px;
  height: 44px;
  background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

Ejemplo explicado:

<img id="home" src="img_trans.gif">

- Solo define una pequeña imagen transparente porque el atributo src no puede estar vacío. La imagen mostrada será la imagen de fondo que especifiquemos en CSS

width: 46px; height: 44px;

- Define la porción de la imagen que queremos usar.

background: url(img_navsprites.gif) 0 0;

- Define la imagen de fondo y su posición (0px izquierda, 0px arriba)

Esta es la forma más fácil de usar sprites de imágenes, ahora queremos expandirla usando enlaces y efectos de desplazamiento.

Sprites de imágenes: crear una lista de navegación

Queremos usar la imagen del sprite ("img_navsprites.gif") para crear una lista de navegación.

Usaremos una lista HTML, porque puede ser un enlace y también admite una imagen de fondo:

Ejemplo

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
    top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 
0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') 
-91px 0;
}

Pruébelo usted mismo →

<!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: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Ejemplo explicado:

#navlist {position:relative;}

- la posición se establece en relativa para permitir un posicionamiento absoluto dentro de ella

#navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}

- el margen y el relleno se establecen en 0, se elimina el estilo de lista y todos los elementos de la lista tienen una posición absoluta

#navlist li, #navlist a {height:44px;display:block;}

- la altura de todas las imágenes es 44px

Ahora comience a posicionar y diseñar cada parte específica:

#home {left:0px;width:46px;}

- Ubicado completamente hacia la izquierda y el ancho de la imagen es 46px

#home {background:url(img_navsprites.gif) 0 0;}

- Define la imagen de fondo y su posición (0px izquierda, 0px arriba)

#prev {left:63px;width:43px;}

- Ubicado 63 px a la derecha (#home ancho 46 px + algo de espacio adicional entre elementos), y el ancho es 43 px

#prev {background:url('img_navsprites.gif') -47px 0;}

- Define la imagen de fondo 47px a la derecha (#home ancho 46px + línea 1px divisor)

#next {left:129px;width:43px;}

- Colocado 129 px a la derecha (el inicio de #prev es 63 px + ancho #prev 43 px + espacio adicional), y el ancho es 43 px

#next {background:url('img_navsprites.gif') -91px 0;}

- Define la imagen de fondo 91px a la derecha (#home ancho 46px + 1px divisor de línea + #prev ancho 43px + divisor de línea 1px)

Sprites de imagen: efecto de desplazamiento

Ahora queremos agregar un efecto de desplazamiento a nuestra lista de navegación.

Consejo: El selector :hover se puede utilizar en todos los elementos, no sólo en los enlaces.

Nuestra nueva imagen ("img_navsprites_hover.gif") contiene tres imágenes de navegación y tres imágenes para usar en efectos de desplazamiento:

Debido a que se trata de una sola imagen y no de seis archivos separados, no habrá ningún retraso en la carga cuando un usuario pasa el cursor sobre la imagen.

Solo agregamos tres líneas de código para agregar el efecto de desplazamiento:

Ejemplo

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px 
-45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px 
-45px;
}

Pruébelo usted mismo →

<!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: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>
<body>

<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>

</body>
</html>

Ejemplo explicado:

#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;}

- Para las tres imágenes flotantes especificamos la misma posición de fondo, solo 45 píxeles más abajo