雪碧图的使用

在前端的页面中，难免会用到许多的图片，如果每一个位置的图片都需要一张张的图片，那样不仅会占用大量的空间，而且会降低网页的速度。

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

【1】减少http请求次数

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

应用方面：

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

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

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

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

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

转载于:https://www.cnblogs.com/Song-Timfa/p/6800254.html