在前端的页面中网页上面嘚每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器降低页面的加载速度，难免会用到许多的图片如果每一个位置的图片都需要一张张的图片，那样不仅会占用大量的空间而且会降低网页的速度。为了有效地减少服务器接收和发送请求的次数提高页面的加载速度，因此产生了css精灵技术。

　　css精灵图(sprite)(也叫雪碧图等)就是一种网页图片应用处理方式它允许将一个页面涉及到的所囿零星图片都包含到一张大图中。使用雪碧图的处理方式可以实现两个优点：

　　【1】减少http请求次数

　　【2】减少图片大小提升网页加載速度 (多张图片加载速度小于拼合成的图片的加载速度)

　　【1】静态图片，不随用户信息的变化而变化(通常在网站上以常态的形式存在)

　　【2】小图片，图片容积比较小

　　【3】对于img标签设置的内容性图片，是不能合并到雪碧图的如果合并这些图片会影响页面可读性，语义化降低且可调整的范围小

　　【4】对于横向和纵向都平铺的图片，也不能合并到雪碧图中如果是横向平铺，只能将所有横向平鋪的图合并成一张大图只能竖直排列，不能水平排列;如果是纵向平铺只能将所有纵向平铺的图合并成一张大图，只能水平排列不能豎直排列。