Le ' images-objets ” est une technique dans laquelle une grande image est créée qui se compose de plusieurs images uniques. Et n'importe quelle partie de la grande image peut être affichée en fonction des exigences de conception. Il aide les développeurs à créer en douceur des éléments visuellement attrayants. Les sprites d'image peuvent être utilisés pour les icônes, les boutons et d'autres éléments graphiques. Cet article illustre la procédure étape par étape d'utilisation des sprites d'image dans CSS.
Comment utiliser I créer des sprites en CSS ?
En CSS, les développeurs utilisent des sprites d'image pour minimiser/réduire le temps de chargement d'une page Web. Cela aide à réduire les requêtes HTTP, assure un chargement plus rapide et améliore le facteur d'expérience utilisateur. Par exemple, visitez l'exemple ci-dessous :
Exemple : utilisation d'un sprite d'image dans un élément de liste
Dans cet exemple, une liste ordonnée est créée et dans chaque élément de la liste, une partie de l'image du sprite est affichée à l'écran.
Prérequis:
Pour obtenir l'image spécifique du sprite d'image, les dimensions du sprite d'image utilisé sont particulièrement importantes. Par exemple, l'image qui a une dimension de ' 937×156 ” est illustré ci-dessous :
Suivez les étapes ci-dessous pour afficher une partie de l'image affichée ci-dessus :
Étape 1 : Création d'éléments de liste
La liste non ordonnée est générée sur la page Web, comme indiqué dans l'extrait de code ci-dessous :
< ul >Vide: < ce identifiant = 'vide' > ce >
Moitié: < ce identifiant = 'moitié' > ce >
Complet: < ce identifiant = 'complet' > ce >
ul >
La description de l'extrait de code ci-dessus :
-
- Tout d'abord, utilisez le '
' étiqueter. - Ensuite, attribuez les identifiants de ' vide ”, “ moitié ' et ' complet ” pour trois éléments de la liste. Ceux-ci sont utilisés plus tard pour afficher une partie de l'image plus grande.
- Tout d'abord, utilisez le '
Étape 2 : Affichage de la première image
Pour afficher le cœur vide sur la page Web qui est la première image du sprite d'image. Utilisez le ' vide ” id et insérez le code suivant :
#vide {largeur : 157 px ;
hauteur : 150px ;
arrière-plan : URL ( .. / sprite.jpg ) 0 0 ;
}
Dans la ligne de codes ci-dessus :
-
- Tout d'abord, définissez le ' largeur ' et ' hauteur ” de l'image que le développeur souhaite afficher sur la page Web.
- Ces propriétés sont affectées aux valeurs de ' 157px ' et ' 150px » selon l'exemple donné ci-dessus, mais elles peuvent varier par rapport aux images de dimensions différentes.
- Ensuite, fournissez le chemin du ' lutin 'l'image à la' arrière-plan ' propriété. Maintenant, définissez la direction de ' 0 ' et ' 0 ” et il affiche la première partie du sprite d'image.
Après l'exécution de la ligne de code ci-dessus, la page Web ressemble à ceci :
L'instantané ci-dessus montre que la première image du sprite d'image est affichée sur la page Web.
Étape 3 : Affichage de l'image du milieu et de la dernière
Pour afficher la partie médiane et la dernière image de l'image-objet, insérez les propriétés CSS suivantes :
#moitié {largeur : 157 px ;
hauteur : 150px ;
arrière-plan : URL ( .. / sprite.jpg ) -462px 0px
}
#complet {
largeur : 157 px ;
hauteur : 150px ;
arrière-plan : URL ( .. / sprite.jpg ) -770px 0px
}
La description de l'extrait de code ci-dessus :
-
- Tout d'abord, sélectionnez le ' moitié ” id et insérez les mêmes propriétés CSS que celles utilisées à l'étape ci-dessus.
- Pour afficher l'image du milieu à partir de l'image-objet, modifiez la direction ou attribuez un rembourrage à partir du côté gauche. Par exemple, la direction à partir de la gauche est définie sur ' négatif 462px ”.
- De la même manière, affichez la dernière image en réglant la direction de la gauche sur ' -770px ”.
Après l'exécution des propriétés CSS ci-dessus, la page Web apparaît comme ceci :
L'instantané ci-dessus montre que les trois images du sprite d'image ont été affichées sur la page Web.
Conclusion
Le ' images-objets ' est une seule grande image composée de plusieurs images plus petites, tout comme la fonction de collage. Et toute partie de la grande image qui représente une image plus petite peut être affichée. Selon les exigences en utilisant le ' arrière-plan ” propriété fournie par CSS. Pour afficher l'image spécifique du sprite d'image, définissez d'abord la largeur et la hauteur de l'image. Après cela, utilisez les valeurs de direction pour afficher uniquement la partie de l'image à partir du sprite d'image.