Application of Sprites in css

This article mainly introduces the application of sprites in CSS. This is a very simple application. However, in the design, this can reduce the pressure on the server and reduce the number of requests. It is a good method.

The example code is as follows:

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;//在这里规定从某一坐标开始显示图片}

Summary:

Even two on such a small picture In fact, the response time of pictures is not much slower, but there is a problem. When two pictures alternate, it is easy for the background picture to be reloaded, resulting in the effect of not displaying for a long time.

Related recommendations:

Use css sprites to reduce image requests

DIV CSS background a whole picture ( css sprites)

CSS Sprites technology zt learn web standards in ten days (div css)_html/css_WEB-ITnose

The above is the detailed content of Application of Sprites in css. For more information, please follow other related articles on the PHP Chinese website!