css中Sprites的应用

实例代码如下：

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

总结：

在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少，不过有一个问题，就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。

相关推荐：

利用css sprites减少图片请求

DIV+CSS背景一张整图(css sprites)

CSS Sprites技术 zt十天学会web标准(div+css)_html/css_WEB-ITnose

以上就是css中Sprites的应用的详细内容，更多请关注Gxl网其它相关文章！