背景图合并

背景图合并

css雪碧图(sprite)是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中。

CSS Sprite

使用雪碧图的处理方式可以实现两个优点：

【1】减少http请求次数

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

缺点：提高了网页的开发和维护成本。

应用场景

并不是所有的图片都可以用来制作雪碧图，只有描述性图片才适合

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

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

a、把同属一个模块的图片进行合并
b、把大小相近的图片进行合并
c、把色彩相近的图片进行合并

如图：合并后的效果图，3张小图合并而成，而且3张小图的高度必须都是一样的，都是44px。

原理通过background的position属性分别定位每一张小图的显示位置，而其他小图不显示。互相之间并不影响。