A quoi sert la technologie des sprites CSS ?

La technologie de sprite CSS fusionne de nombreuses petites images en une seule image plus grande. Ainsi, lorsque la page est chargée pour la première fois, il n'est pas nécessaire de charger trop de petites images, il vous suffit de les charger et de fusionner les petites. images. Utilisez simplement la grande image qui apparaît, ce qui peut améliorer la vitesse de chargement de la page dans une certaine mesure, soulager la pression sur le serveur et économiser le trafic du serveur.

Tutoriel recommandé : Tutoriel vidéo CSS

Qu'est-ce que la technologie des sprites CSS (sprite) ?

la technologie des sprites CSS (sprite) est littéralement traduite par "sprite CSS", également connu sous le nom de "épissure d'image CSS", "positionnement de carte CSS" ou "sprite d'image CSS", "" Sprite CSS " est une méthode de traitement d'application d'image Web.

En fait, toutes les images dispersées impliquées dans une page sont incluses dans une seule grande image. De cette façon, lors de l'accès à la page, les images chargées ne seront pas chargées une par une comme auparavant. s'est présenté.

Raison de la technologie des sprites :

De nombreuses grandes pages Web doivent charger beaucoup de petites images lors de leur premier chargement, et en considérant qu'en même temps, le le serveur est encombré Afin de résoudre ce problème, la technologie des sprite charts est utilisée pour atténuer le problème du temps de chargement long qui affecte l'expérience utilisateur.

Le rôle de la technologie des sprites CSS

Le soi-disant sprite est de fusionner de nombreuses petites images en une seule image plus grande, donc lorsque la page est chargée pour la première fois , vous n'avez pas besoin de charger trop de petites images. Il vous suffit de charger la grande image qui combine les petites images, qui est le sprite. Cela réduit dans une certaine mesure la vitesse de chargement de la page et allège également la charge du serveur. dans une certaine mesure.

1. Réduisez le nombre de requêtes adressées au serveur lors du chargement des images de pages Web.

Vous pouvez fusionner la plupart des images d'arrière-plan et des petites icônes pour une utilisation facile dans n'importe quel endroit, de sorte que les requêtes provenant de différents emplacements soient uniquement Vous devez appeler une image. Cela réduit le nombre de requêtes adressées au serveur, réduit la pression sur le serveur, augmente la vitesse de chargement des pages et économise le trafic du serveur.

2. Améliorer la vitesse de chargement des pages

L'un des avantages de la technologie des sprites est le temps de chargement des images (le temps de chargement d'une seule image lorsqu'il y a plusieurs sprites). Un GIF composé des images requises sera nettement plus petit que la taille combinée de toutes les images.

Un seul GIF n'a qu'une seule table de couleurs associée, tandis que chaque GIF divisé a sa propre table de couleurs, ce qui augmente la taille globale. Par conséquent, un seul sprite JPEG ou PNG est susceptible d’être plus petit que la taille totale d’une image divisée en plusieurs images.

3. Réduisez certains bugs lorsque la souris survole

IE6 ne préchargera pas activement l'image d'arrière-plan lors du survol de la souris, donc si vous utilisez plusieurs images, le survol de la souris Il y aura un phénomène blanc clignotant. En utilisant CSS Sprite, puisqu'une seule image suffit, ce phénomène ne se produira pas.

Comment utiliser la technologie des sprites CSS

le sprite CSS (sprite) consiste en fait à fusionner plusieurs images en un seul fichier image, en utilisant l'arrière-plan CSS et le rendu des attributs background -position, ce qui signifie que vos balises deviennent plus complexes, l'image est définie en CSS, pas la balise .

Lorsque des images doivent être utilisées, à ce stade, l'image est affichée via l'attribut CSS background-image combiné avec background-repeat, background-position, etc.

Exemple :

Par exemple, c'est une grande feuille de sprite, nous l'utilisons maintenant pour épeler les lettres que nous voulons, par exemple ANDY

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .nn{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .dd{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .yy{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

Effet final :

En fait, pour parler franchement, il s'agit de définir l'image du sprite comme un grand arrière-plan, puis de déplacer l'image d'arrière-plan à travers l'arrière-plan -position pour montrer ce que nous voulons La pièce à afficher.

Bien que la carte des sprites ait atténué la pression du serveur et les problèmes d'expérience utilisateur, elle présente encore un gros défaut, c'est-à-dire qu'elle affecte l'ensemble du corps. Les arrière-plans de ces images sont tous mesurés en détail par nos soins. Si nous devons changer de page, ce sera une tâche très fastidieuse. . .

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!