CSS
Sprites d'image CSS

Syntaxe

• // Utilisation de la position d'arrière-plan
  background: url ("sprite-image.png");
  position de fond: -20px 50px;
• // raccourci de propriété d'arrière-plan
  background: url ("sprite-image.png") -20px 50px;

Remarques

Une implémentation de base

Qu'est-ce qu'un sprite d'image?

Un sprite d'image est un actif unique situé dans une feuille d'image-objet. Une feuille d'image-objet image est un fichier image contenant plus d'un élément pouvant être extrait.

Par exemple:

L'image ci-dessus est une feuille d'image-objet et chacune de ces étoiles est une image-objet dans la feuille de sprite. Ces feuilles de sprite sont utiles car elles améliorent les performances en réduisant le nombre de requêtes HTTP qu'un navigateur doit effectuer.

Alors, comment en implémentez-vous un? Voici un exemple de code.

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

En définissant la largeur et la hauteur de l'image-objet et en utilisant la propriété background-position en CSS (avec une valeur x et y), vous pouvez facilement extraire des images-objets à partir d'une feuille de sprite à l'aide de CSS.