CSS Sprite雪碧图

CSS Sprite 也叫CSS精灵，该方法是将多个小图标等图片集成到一张大图上，而后利用 background-image 和background-position 两个属性进行背景定位来控制须要显示的部分。

 

好比在有不少小图片、小图标的网页上，每一个小图标都单独用一张图片， 页面加载的时候，每张图片的显示都产生一个HTTP请求，若是请求文件过多则会引起性能问题。为了减小http请求数，将大量的图片整合成一张图（Sprite）来使用，这样加载的时候只需加载一次，从而提升页面的性能。

 

雪碧图的制做：

• PS 手动拼图
• 使用 Sprite 工具自动生成（CssGaga 或者 CssSprite.exe）（CssGaga 的详细使用见百度经验）

 

何时使用及使用技巧：

1. 静态图片，图片不随用户信息的变化而变化，好比一些小图标等；
2. 小图片，容量比较小的；图片加载量比较大的。大图片不建议用，拼完以后就更大了，加载就慢了；
3. 使用到固定大小的盒子（box）里，这样才可以遮挡住不该该显示的部分；
4. CSS Sprites 的图片尽可能不要有大空隙，多数状况下会增大致积；
5. 在 CSS Sprites 图片中，水平排列的图片会比垂直排列的文件体积大。

 

缺点：

1. 在图片合并的时候，要把多张图片有序合理的合并成一张图片，须要留足够的空间，防止出现没必要要的背景，相比直接使用单个图片比较繁琐；
2. 在宽屏，高分辨率的屏幕下的自适应页面，图片若是不够宽很容易出现背景断裂；
3. 比较麻烦，须要测量计算每个背景单元的精确位置；
4. 维护的时候比较麻烦，若是页面背景在原来的地方放不下，又只能（最好）往下加图片而后更改CSS，这样图片的字节就增长了；
5. 因为图片的位置须要固定为某个绝对数值，这就失去了诸如 center 之类的灵活性。