精灵图原理

一、什么是精灵图

1、为什么用精灵图？

首先，我们先来了解一下，页面在接受图片的过程。

每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

2、精灵图的原理是什么？

精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧。

3、css样式介绍background-image和background-position

background-image：url（引入图片的路径）；可以引入多张图，用逗号隔开即可。

background-position：x y；x和y是x轴上的偏移值，y是y轴上的偏移值

与此同时还可以配合background-repeat和background-size进行精确把控。

优点：

①减少网页的http请求，从而加快了网页加载速度，提高用户体验。

②减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。

③解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。

④更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

①在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

②CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。

③在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。

④精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。