Comment utiliser les sprites CSS

Comment utiliser le sprite CSS : intégrez d'abord quelques images d'arrière-plan de la page Web dans un fichier image ; puis utilisez la combinaison de CSS "background-image", "background-repeat" et "background-position" Juste effectuer un positionnement en arrière-plan.

L'environnement d'exploitation de ce tutoriel : système windows7, version css3, ordinateur thinkpad t480.

Recommandation : "Tutoriel vidéo CSS"

Les sprites CSS sont appelés sprites CSS par de nombreuses personnes en Chine et constituent 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. Pour la vitesse du réseau populaire actuelle, le temps de chargement requis pour une seule image ne dépassant pas 200 Ko est fondamentalement le même, il n'y a donc pas lieu de s'inquiéter de ce problème.

La clé pour accélérer la technologie CSS Sprites n'est pas de réduire le poids, mais de réduire le nombre. Le découpage traditionnel des images fait attention à la précision. Plus la taille de l'image est petite, mieux c'est, et plus le poids est petit, mieux c'est. En fait, la taille n'a pas d'importance, les ordinateurs sont tous calculés en octets. Chaque fois que le client affiche une image, il envoie une requête au serveur. Par conséquent, plus il y a d’images, plus il y a de demandes et plus le risque de retard est grand. " La combinaison de « background-repeat » et « background-position » effectue le positionnement en arrière-plan. Background-position peut positionner avec précision l'image d'arrière-plan à l'aide de chiffres.

Exemple :HTML

<div class="box">
    <span class="icon1"></span>
    <span class="icon2"></span>
    <span class="icon3"></span>
    <span class="icon4"></span>
</div>

CSS

<style>
       .box {
         width: 600px;
         height:300px;
         border: 3px solid #ccc;
         background-color: #8064A2;
        }
        span {
         display: inline-block;
         width: 25px;
         height: 25px;
         border: 3px solid #ccc;
         background-image: url(css/img/sidebar.png);
         background-repeat: no-repeat;
         margin: 5px;
        }
       .icon1 {
         background-position: 0 0;
        }
       .icon2 {
         background-position: -40px 0;
        }
       .icon3 {
         background-position: 0 -25px;
        }
       .icon4 {
         background-position: -40px -25px;
        }
</style>

Rendu :

Avantages des Sprites CSS :

1. Réduisez les octets de l'image

2. Réduisez les requêtes http de la page Web, améliorant ainsi considérablement les performances de la page

3. difficulté de nommer le problème.

4. Il est plus pratique à entretenir.

Inconvénients des sprites CSS :

1. Lors de la fusion d'images, vous devez fusionner plusieurs images en une seule image de manière ordonnée et raisonnable, et laisser suffisamment d'espace pour éviter que des arrière-plans inutiles n'apparaissent dans le section ; tout va bien, mais le plus pénible est la page adaptative sous les écrans larges et haute résolution. Si votre image n'est pas assez large, il est facile que l'arrière-plan se brise

2 , Sprites CSS. sont plus difficiles à maintenir. S'il y a un léger changement dans l'arrière-plan de la page, vous devez généralement modifier l'image fusionnée. Il est préférable de ne pas toucher aux zones qui n'ont pas besoin d'être modifiées, afin d'éviter de modifier davantage de CSS. Si vous le mettez à l'endroit d'origine. S'il n'est pas plus bas, vous pouvez seulement (de préférence) ajouter des images plus bas, ce qui augmentera les octets de l'image et modifiera également le CSS.

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!