css精灵技术
精灵技术产生的背景
图所示为网页的请求原理图，当用户访问一-个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
css精灵技术的本质
简单地说，CSS精灵是-种处理网页背景图像的方式。它将-一个页面涉及到的所有零星背景图像都集中到- -张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图，如下图所示为京东网站中的一-个精灵图。（把多个小图片整理到一张大图上进行传输，实现减轻请求次数的目的）
css精灵技术的使用
正常在盒子里面插入图片，最后给个搜索，给个反比例就好
制作精灵图
CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)，那我们要做的，就是把小图拼合成一-张大图。大部分情况下，精灵图都是网页美工做。我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往 上放。我们精灵图的宽度取决于最宽的那个背景。我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。在我们精灵图的最低端，留一.片空隙，方便我们以后添加其他精灵图。
