CSS Sprites （精灵图）

一 什么是 CSS Sprites

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

二 实例

1 关键HTML代码

 
    
WORD文章标题
 
    
PPT内容标题
 
    
Excel内容标题
 
    
PDF内容标题
 
    
文本文档标题
 
 

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} 

2. 再分别对不同span class设置对于图标背景定位具体值

ul.Sprites li span.a1{ background-position: -62px -32px}

设置背景图片作为对应盒子对象背景后向左“拖动”62px，向上“拖动”32px开始显示此背景图标。

解释：第一个值提供左右移动距离（可正可负，负值时将总图向左拉动），第二个提供上下移动距离（可正可负，负值是将总图向上拉动）。呈现的效果是以span为盒子，把所提供的总图案进行平移，从而改变span的背景。

建议：将每个span的宽高就设置成每个小图标的宽高。这样方便计算也方便移动。