Maison > interface Web > tutoriel CSS > css Sprites petit exemple code_Experience échange

css Sprites petit exemple code_Experience échange

WBOY
Libérer: 2016-05-16 12:05:36
original
1433 Les gens l'ont consulté

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
Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal