Application des Sprites en CSS

Cet article présente principalement l'application des sprites en CSS. C'est une application très simple Cependant, dans la conception, cela peut réduire la pression sur le serveur et réduire le nombre de requêtes . .

L'exemple de code est le suivant :

body { 
  font-family: "Lucida Sans", "Lucida Sans Unicode"; 
  font-size: 14px; 
  line-height: 24px; 
} 
ul { 
  list-style-type: none; 
} 
li { 
  float: left; 

} 
a{ 
  background-image: url(bg.gif); 
  height: 26px; 
  background-position: 53px 0px; 
  display: block; 
  margin-right: 10px; 
  width: 53px; 
  text-align: center; 
  color: #333333; 
} 

li a:link { 
  text-decoration: none; 
} 
li a:visited { 
  text-decoration: none; 
} 
li a:hover { 
  text-decoration: none; 
  background-position: 0 0px;//在这里规定从某一坐标开始显示图片}

Résumé :

Même sur un si petit image En fait, le temps de réponse des deux images n'est pas beaucoup plus lent, mais il y a un problème lorsque les deux images alternent, il est facile de recharger l'image d'arrière-plan, ce qui entraîne un effet de non-affichage pendant une longue période. .

Recommandations associées :

Utilisez des sprites CSS pour réduire les demandes d'images

Arrière-plan DIV+CSS pour un ensemble image (sprites css)

La technologie CSS Sprites zt apprend les standards du web en dix jours (div+css)_html/css_WEB-ITnose

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!