一 .什么是精灵图
精灵图（英语：Sprite），又被称为拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图。
因为常见碳酸饮料雪碧的英文名称也是“Sprite”，也有人会使用雪碧图的非正式译名
历史来源
精灵图源于1974年左右街机街机的兴起，其中的只读存储器使得精灵图被广泛使用。[Taito] "太东"当时发售了最早使用精灵图的电子游戏。
二十世纪七十年代中期，Signetics设计出第一款支持生成精灵图形的视频/图形处理器。
1977年发售的Atari 2600以其硬件精灵图为卖点，支持五个图形对象同时在游戏场景中独立移动。
“精灵图”一词首次作为图形术语出现，是在德州仪器的9918(A)视频显示处理器上。使用“精灵图”作为术语，是因为精灵图并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中数据之上，不影响其中数据，就像幽灵或精灵一样。
精灵图解决的问题
例如：需要在pdd主页中展示10张小图片
10张小图片分别发送 → 发送10次
合成一张精灵图发送 → 发送1次
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
二.优缺点
优势：
加快网页加载速度
如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染。
1.采用了精灵图这一技术可以缓解加载时间过长从而影响用户体验的这个问题。
2.在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。
3.使用精灵图可以有效减少服务器接收和发送请求的次数，从而达到提高页面的加载性能
后期维护简单
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用
缺点：
在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;
三.使用步骤
1.工具：
1.PS、sinpaste等可以测量像素的工具
2.素材：有多个小图的大图
2.测量字母的大小及坐标
1.通过矩形选框工具，测量字母的大小，并将div的大小设置为字母的大小。
2.打开窗口菜单栏中的[图片]信息，可以查询字母width、height、x轴和y轴的信息。
3.将鼠标光标移动到字母的左上角位置，通过右侧的信息面板测出x和y的值。
4.在css中编写style样式，通过background-position定位到字母所在的位置。
四.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图的使用</title>
<style>
/* 共同的样式 */
div{
background: url(../images/images/abcd.jpg) ;/* 导入精灵图资源 */
float: left;/* 设置向左浮动 */
}
.box1{
/* 盒子的高度宽度要和精灵图的大小一致 */
width: 106px;
height: 107px;
background-position: -494px -142px;/* 分别对应x 和 y 轴 */
/* 进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
}
.box2{
/* 盒子的高度宽度要和精灵图的大小一致 */
width: 106px;
height: 107px;
background-position: -494px -142px;/* 分别对应x 和 y 轴 */
/* 进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
五.总结
- 精灵图主要针对小的背景图片使用。
- 精灵图的显示主要借助于背景位置来实现——background-position
- 一般情况下精灵图都是负值。
- 网页中的坐标：x轴右边是正值，左边是负值，y轴也是和x轴一样的原理。
