CSS精灵图

精灵图

CSS精灵图也可以说CSS雪碧图
就是将多个小的图片整合在一张图上，这样就可以减少浏览器向服务器请求的次数，可以提高网页的加载速度。
使用精灵图时一定要注意显示精灵图的这个容器一定要比背景图片小才可以，否则就会漏出精灵图上的其他背景图片，所以一定要控制好盒子的大小。
精灵图在各种浏览器上使用的非常频繁，如一下情况

前面的这一部分就是使用精灵图来显示照片，整的精灵图就是以下这个样子

为什么盒子的大小这么重要？
因为精灵图上有很多个图片，如果盒子的大小没有设置好，就会漏出旁边的照片。类似于在浏览器页面上抠出来一个小小的洞，然后将这张图中要显示的部分放在抠出的洞中，可以想象，如果洞太大，旁边的图片就会漏出来。
精灵图在浏览器中的使用就是利用background-position来调整整合好的精灵图的位置，来显示出需要的图片，position的定位都是负值，可以从两个方面理解。

1. 原点位置在整个精灵图的左上角，所以等于说每个精灵图的位置都是负值，要确定精灵图的位置自然就是使用坐标将图片位置标出来。
2. 要抠出来的洞是在第一个图片的位置，要将其他照片向左或向上移动，在css中最简单的办法就是利用top和left的负值，来移动图片。

使用精灵图的优点

• 对于浏览器来说请求多张小的图片和请求一张大的图片当然是后者的性能更好，大大减少了浏览器向服务器的请求次数，减少了http请求次数，这也是精灵图被广泛使用的主要原因。
• 使用精灵图可以减少图片的字节数，如果一张图片是4K，9张就是36K，而将所有图片整合在一张图片上之后，只需要4-5K就可以了。
• 在整理图片时，不需要纠结图片的取名问题，特别是在大型浏览器中，这种小的图片非常之多。将所有图片整合在一起，只需要取一个综合的名字就可以了，这样也可以大大提高工作效率。
• 如果想改变网站的风格，只需要改变一张图就可以了，便于后期的维护和修改。

使用精灵图的缺点

• 一定要考虑当前盒子的大小会不会漏出其他图片，一般情况来说还可以，但是如果网页时自适应的，那么可能就会比较麻烦了。
• 精灵图的创建比较麻烦，要计算好每个图片之间的距离和位置，如果做的不合理，那么使用时就会比较麻烦。
• 精灵图在后期维护上也带来了一定麻烦，因为所有的图片是在一张图片上，甚至位置都是相互影响的，所以一旦改变了一个，可能整张精灵图都需要重新做。