爱站程序员基地目录
1 精灵图的使用
2.精灵图使用案例
1 精灵图的使用
使用精灵图核心总结：1. 精灵图主要针对于小的背景图片使用。2. 主要借助于背景位置来实现background-position 3. 一般情况下精灵图都是负值。因为在精灵图中，坐标是从左上角出发，背景图往反方向移动,所以是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）
精灵图的本质是处理网页背景图像的一种技术，可以有效减少服务器接受和请求的次数，提高页面的加载速度。但是同样也不能把大量图片资源放在精灵图上，否则同样会导致加载精灵图速度变慢，而影响页面加载速度。
2.精灵图使用案例
接下来我们来使用精灵图拼自己的姓名，下面是素材
代码如下：
[code] //html结构<span class=\"f\"></span><span class=\"a\"></span><span class=\"n\"></span><span class=\"m\"></span><span class=\"i\"></span><span class=\"nn\"></span>//css样式span { display: inline-block; background: url(images/abcd.jpg) no-repeat; }.f{ width: 104px; height: 114px; background-position: 10px -140px;}.a{ width: 104px; height: 110px; background-position: -2px -10px;}.n{ width: 110px; height: 110px; background-position: -255px -270px;}.m{ width: 140px; height:110px; background-position: -110px -270px;}.i{ width: 60px; height: 108px; background-position: -327px -138px;}.nn{ width: 110px; height:110px; background-position: -255px -270px;}
这是代码执行的效果：
很多小问题我们稍微一看就懂，这时候如果能动手敲一敲代码练习一下，这个知识点在我们的学习过程中，就从“懂”的状态 变成“会”的状态了。
