CSS
Imagen de CSS Sprites

Sintaxis

• // Usando la posición de fondo
  fondo: url ("sprite-image.png");
  posición de fondo: -20px 50px;
• // taquigrafía de propiedad de fondo
  fondo: url ("sprite-image.png") -20px 50px;

Observaciones

Una implementación básica

¿Qué es un sprite de imagen?

Un sprite de imagen es un activo único ubicado dentro de una hoja de sprite de imagen. Una hoja de sprite de imagen es un archivo de imagen que contiene más de un recurso que se puede extraer de ella.

Por ejemplo:

La imagen de arriba es una hoja de sprite de imagen, y cada una de esas estrellas es un sprite dentro de la hoja de sprite. Estas hojas de sprites son útiles porque mejoran el rendimiento al reducir la cantidad de solicitudes HTTP que un navegador podría tener que hacer.

Entonces, ¿cómo implementar uno? Aquí hay un código de ejemplo.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>
<div class="icon icon3"></div>

CSS

.icon {
    background: url(“icons-sprite.png”);
    display: inline-block;
    height: 20px;
    width: 20px;
}
.icon1 {
      background-position: 0px 0px;
}
.icon2 {
      background-position: -20px 0px;
}
.icon3 {
      background-position: -40px 0px;
}

Al usar la configuración del ancho y la altura del sprite y al usar la propiedad de posición de fondo en CSS (con un valor de x e y), puede extraer fácilmente sprites de una hoja de sprite usando CSS.