Image sprite CSS

Image sprite

L'image sprite est un ensemble d'images inclus dans une seule image.

Les pages contenant de nombreuses images peuvent prendre beaucoup de temps à charger et générer plusieurs demandes serveur.

L'utilisation de l'image sprite réduit le nombre de demandes serveur et économise la bande passante.

Image sprite - Exemple simple

Nous utilisons une seule image ("navsprites.gif") plutôt que trois images séparées :

Image de navigation

En utilisant le CSS, nous pouvons afficher uniquement une partie de l'image nécessaire.

Dans l'exemple suivant, le CSS spécifie quelle partie de l'image "navsprites.gif" doit être affichée :

Exemple

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

Essayez-le vous-même

Explication de l'exemple :

  • <img id="home" src="trans.gif"> - Définir uniquement une petite image transparente, car l'attribut src ne peut pas être vide. L'image affichée sera l'image de fond spécifiée dans notre CSS.
  • width: 46px; height: 44px; - Définir la partie de l'image que nous allons utiliser
  • background: url(navsprites.gif) 0 0; - Définir l'image de fond et sa position (left 0px, top 0px)

Image sprite - Création de la liste de navigation

Nous souhaitons utiliser l'image de sprite ("navsprites.gif") pour créer une liste de navigation.

Nous allons utiliser une liste HTML, car elle peut être un lien et prend en charge les images de fond :

Exemple

#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;
}

Essayez-le vous-même

Explication de l'exemple :

  • #navlist {position:relative;} - La position est définie en relative pour permettre une position absolue à l'intérieur
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Les marge et padding sont définis à 0, le list-style est supprimé et tous les éléments de liste sont positionnés de manière absolue
  • #navlist li, #navlist a {height:44px;display:block;} - Toutes les hauteurs des images sont de 44px

Commencez à définir la position et le style pour chaque partie spécifique :

  • #home {left:0px;width:46px;} - Positionné à gauche de manière continue, largeur de l'image 46px
  • #home {background:url(navsprites.gif) 0 0;} - Définit l'image de fond et sa position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Positionné à droite de 63px (largeur de #home 46px + un espace supplémentaire entre les éléments), largeur 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Définit l'image de fond vers la droite de 47px (largeur de #home 46px + 1px de séparation)
  • #next {left:129px;width:43px;} - Positionné à droite de 129px (commencement de #prev 63px + largeur de #prev 43px + espaces supplémentaires), largeur 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Définit l'image de fond vers la droite de 91px (largeur de #home 46px + 1px de séparation + largeur de #prev 43px + 1px de séparation)

Image sprite - Effet de survol

Maintenant, nous allons ajouter un effet de survol à la liste de navigation.

Conseil ::hover selector can be used for all elements, not just links.

Notre nouvelle image ("navsprites_hover.gif") contient trois images de navigation et trois images pour l'effet de survol :

Image de navigation

Car c'est une image, et non six fichiers individuels, donc lorsque l'utilisateur place le curseur sur l'image,Il n'y a pas de décalage de chargement.

Nous ajoutons seulement trois lignes de code pour obtenir l'effet de survol :

Exemple

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Essayez-le vous-même

Explication de l'exemple :

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Nous avons spécifié la même position de fond pour les trois images au survol, décalée de 45 pixels vers le bas