1. Concentrez toutes les images d'arrière-plan dispersées impliquées dans la page dans une grande image, puis utilisez la grande image pour la page Web. Lorsqu'un utilisateur accède à une page, il lui suffit d'envoyer une requête au serveur une seule fois.
2. Utilisez directement des attributs tels que background-position pour localiser avec précision la partie d'arrière-plan requise.
Exemple
<!DOCTYPEhtml>
<html>
<tête>
<méta charset="UTF-8">
<titre>Titre</titre>
</tête>
<corps>
<div>
<span></span>
<span></span>
<span></span>
</div>
</corps>
<style>
.boîte durée {
affichage : bloc en ligne ;
}
.j {
arrière-plan : url("abcd.jpg") sans répétition -389px -141px ;
largeur : 102 px ;
hauteur : 112px ;
}
.w {
arrière-plan : url("abcd.jpg") sans répétition -117px -560px ;
largeur : 135 px ;
hauteur : 112px ;
}
.t {
arrière-plan : url("abcd.jpg") sans répétition -368px -417px ;
largeur : 102 px ;
hauteur : 112px ;
}
</style>
</html>Ce qui précède est une introduction à la technologie des sprites CSS. J'espère que cela sera utile à tout le monde.