Introduction aux sprites CSS
Il est généralement traduit par « assemblage d'images CSS » ou « positionnement de texture CSS ». Les CSS Sprites ne sont pas une technologie nouvelle. Ils se sont développés de manière relativement mature dans le développement Web. L'ombre des CSS Sprites se retrouve partout dans les pages Web des filiales d'Alibaba. Mais les CSS Sprites ne sont pas une règle d’or, mais dans de nombreux cas, ils présentent certains avantages, le plus important étant qu’ils peuvent réduire la charge sur le serveur et améliorer la vitesse de chargement des pages Web. À mesure que la conception Web évolue dans une direction plus sophistiquée et ingénieuse, les concepteurs commencent à envisager d'utiliser des méthodes non Javascript pour créer des effets de survol et de menu de survol. C'est à cette époque que CSS Sprite a vu le jour.
Pour parler franchement, CSS Sprites intègre en fait certaines images d'arrière-plan de la page Web dans un fichier image, puis utilise la combinaison de CSS "background-image", "background-repeat" et "background-position" pour positionner l'arrière-plan. Position peut utiliser des nombres pour localiser avec précision la position de l'image d'arrière-plan.
Lorsque la page se charge, au lieu de charger chaque image individuelle, l'intégralité de l'image combinée est chargée en une seule fois. Il s'agit d'une grande amélioration. Cela réduit considérablement le nombre de requêtes HTTP, réduit la pression sur le serveur et raccourcit le délai requis pour charger les images en survol, rendant l'effet plus fluide et sans pauses.
Articles liés aux Sprites CSS
Application Sprites CSS
À cet égard, Taobao fait mieux. Permettez-moi de prendre Taobao comme exemple.
Exemple 1 : navigation dans la page de la chaîne Taobao
Rendu :
diagramme des sprites :
