精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。
精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。例如王者荣耀页面里的几个小logo:
运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。
其实说白了就是将精灵图设为一个大背景，然后通过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 轴 */
/* 在ps中进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
}
.box2{
/* 盒子的高度宽度要和精灵图的大小一致 */
width: 106px;
height: 107px;
background-position: -494px -142px;/* 分别对应x 和 y 轴 */
/* 在ps中进行定位的时候，把光标放在矩形选区的左上角，可以得到位置 */
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>