脚本宝典收集整理的这篇文章主要介绍了css Sprites小实例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

这是一个很简单的应用，不过在设计中，这样做可以减轻服务器的压力，是请求次数减少，是一个不错的方法。
特别要说明的是，在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少，不过有一个问题，就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果。（时间长短视服务器的响应速度和图片大小而变化）

下面是css的部分：

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


从上面的代码不难看出，这里面起决定性作用的是

background-position:* *px;


这样，在复杂的css应用中，我们便可以解决背景图片从新加载的问题 

脚本宝典总结

以上是脚本宝典为你收集整理的css Sprites小实例代码全部内容，希望文章能够帮你解决css Sprites小实例代码所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。