Comment utiliser les sprites CSS ?

Les sprites CSS sont appelés sprites CSS par de nombreuses personnes en Chine. Il s'agit d'une méthode de traitement d'applications d'images Web. Il vous permet d'inclure toutes les images dispersées impliquées dans une page dans une seule grande image, de sorte que lors de l'accès à la page, les images chargées ne seront pas affichées une par une comme auparavant.

Comment utiliser CSS

Les sprites CSS intègrent en fait certaines images d'arrière-plan de la page Web dans un seul fichier image , puis utilisez la combinaison de CSS "background-image", "background-repeat" et "background-position" pour positionner l'arrière-plan. La position d'arrière-plan peut utiliser des nombres pour positionner avec précision la position de l'image d'arrière-plan.

Dans l'accès aux pages Web, chaque fois que le client a besoin d'accéder à une image, il enverra une demande au serveur. Par conséquent, plus il accède à des images, plus il y a de demandes et plus la possibilité de le faire est grande. retard. .

Par conséquent, la clé pour accélérer la technologie CSS Sprites n'est pas de réduire la qualité, mais de réduire le nombre. Bien sûr, l'augmentation de la consommation de mémoire qui l'accompagne, la synthèse fastidieuse des images CSS Sprites et d'autres défauts ne s'amélioreront pas. la performance du site web, cela ne suffit plus.

sprites css Champ d'application :

1, l'accélération des pages Web doit être complétée en réduisant le nombre de requêtes http.

2. La page Web contient un grand nombre de petites icônes. Alternativement, certaines icônes sont très polyvalentes.

3. Il y a des images dans la page Web qui doivent être préchargées. Principalement la relation entre a et a:hover background image. Si les images d'arrière-plan de a et a:hover sont chargées séparément, la souris de l'utilisateur se déplacera sur un bouton, et l'arrière-plan du bouton disparaîtra soudainement puis reviendra, provoquant un « scintillement » si la couleur du texte du bouton est la même ou similaire. au second plan, ce qui est encore plus gênant, cela peut donner l'illusion que le bouton a "disparu".

Conditions qui doivent être remplies

Dans la conception de sites Web, il est préférable d'avoir une règle pour les images assemblées grâce à cette technologie. Largeur ou hauteur fixe. Il est préférable que la largeur et la hauteur puissent être fixes. Les images qui doivent être carrelées ne conviennent évidemment pas aux sprites.

Les boutons de l'image ci-dessus sont de largeur et de hauteur fixes.

Si la largeur est fixe, plusieurs petites images peuvent être disposées en parallèle. Si la hauteur est fixe, les petites images seront disposées verticalement.

Si la technologie des sprites CSS est obligée d'être utilisée lorsque l'arrière-plan n'a ni une largeur ni une hauteur fixe, il est facile de produire un état où "des images qui ne devraient pas apparaître apparaissent sur la page". S'il est « obligé de régler la hauteur », cela sera également très préjudiciable à l'entretien futur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!