css Sprites petit exemple code_Experience échange

Il s'agit d'une application très simple, mais dans sa conception, cela peut réduire la pression sur le serveur et réduire le nombre de requêtes, ce qui est une bonne méthode.
Il est à noter que même deux images sur une si petite image ne sont pas beaucoup plus lentes en termes de temps de réponse. Cependant, il y a un problème lorsque deux images alternent, il est facile de recharger l'image d'arrière-plan. l'effet ne se manifeste pas avant longtemps. (Le temps varie en fonction de la vitesse de réponse du serveur et de la taille de l'image)

Ce qui suit est la partie CSS :

body {
font-family : "Lucida Sans", "Lucida Sans Unicode ";
taille de police : 14px;
hauteur de ligne : 24px;
}
ul {
type de style de liste : aucun;
}
li {
float : gauche ;

}
a{
background-image : url(bg.gif);
hauteur : 26px
background-position : 53px 0px ;
affichage : bloc ;
marge droite : 10 px ;
largeur : 53 px ;
 alignement du texte :
couleur : #333333 ; li a:link {
text-decoration : aucun ;
}
li a:visited {
text-decoration : aucun
}
li a:hover {
text -decoration: none;
background-position: 0 0px;//Il est spécifié ici de commencer à afficher les images à partir d'une certaine coordonnée}


Ce n'est pas difficile à voir à partir du code ci-dessus que cela joue un rôle décisif Qu'est-ce que

background-position:* *px;


De cette façon, dans les applications CSS complexes, nous pouvons résoudre le problème du rechargement des images d'arrière-plan