一 什么是 CSS Sprites
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
二 实例
1 关键HTML代码
<ul class="Sprites">
<li><span class="a1"></span><a href="#">WORD文章标题</a></li>
<li><span class="a2"></span><a href="#">PPT内容标题</a></li>
<li><span class="a3"></span><a href="#">Excel内容标题</a></li>
<li><span class="a4"></span><a href="#">PDF内容标题</a></li>
<li><span class="a5"></span><a href="#">文本文档标题</a></li>
</ul>
2 关键CSS代码
ul.Sprites{ margin:0 auto; border:1px solid #F00; width:300px; padding:10px;}
ul.Sprites li{ height:24px; font-size:14px;line-height:24px; text-align:left; overflow:hidden}
ul.Sprites li span{ float:left; width:17px;padding-top:5px;height:17px;
overflow:hidden;background:url(ico.png) no-repeat}
ul.Sprites li a{ padding-left:5px}
ul.Sprites li span.a1{ background-position: -62px -32px}
ul.Sprites li span.a2{ background-position: -86px -32px}
ul.Sprites li span.a3{ background-position: -110px -32px}
ul.Sprites li span.a4{ background-position: -133px -32px}
ul.Sprites li span.a5{ background-position: -158px -32px}
3 解释
1 首先对ul.Sprites li span引入背景
ul.Sprites li span{ background:url(ico.png) no-repeat}
- 再分别对不同span class设置对于图标背景定位具体值
ul.Sprites li span.a1{ background-position: -62px -32px}
设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标。
