雪碧图的使用

在前端的页面中，不免会用到许多的图片，若是每个位置的图片都须要一张张的图片，那样不只会占用大量的空间，并且会下降网页的速度。

css雪碧图(sprite)（也叫精灵图等）就是一种网页图片应用处理方式，它容许将一个页面涉及到的全部零星图片都包含到一张大图中。使用雪碧图的处理方式能够实现两个优势：

【1】减小http请求次数

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

应用方面：

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

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

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

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

雪碧图的使用主要经过将所须要的图片经过软件(主要是Photoshop 或Fireworks )经过必定的规则(间隙，间距，行高的等)整合到一张大的图片里，而后再经过CSS样式中“background-image”，“background- repeat”，“background-position”等基本样式进行处理，以便运用到网页中所须要的位置上。