cssSprites，如何来规划?

一个页面一般会加载多少张css背景图？

首先让我们回忆一下，以前切页面时，会用到哪些类型的素材图？

我努力的想…努力的想啊…大概有：按钮、图标、其它固定尺寸背景图、横竖平铺背景图、横铺背景图、竖铺背景图、左右自适应背景图、上下自适应背景图、颜色鲜艳且尺寸较大的背景图。

从站点的可实现性上考虑，我们该做多少张雪碧图？请看下面这张表：

从表中可以分析出，一个页面的背景图的请求数为：

看到最最多的情况，是不是震惊了？呵呵，其实很少会发生全部用的情况，根据页面实际情况组合使用，请求的个数不会很多，跟第一张图例的背景图请求数相比，规划清晰很多，请求数也减少很多了。

这些图该如何切、如何分布、命名，有没什么讲究？以下是我个人的观点和建议：

（1）横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题，竖铺同理。

（2）固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半，高度随图片内容增长。因为切图前你可能不确定用多大尺寸，我的见解是，到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图，多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景，而页面宽度的一半即可实现最大宽度的左右自适应背景，那么这时你可以把左右自适应的背景放进这张雪碧图中了拼合图片时固定尺寸的图与图之间相隔1像素，避免浏览器放大时，尺寸多计算1像素时可见到临近的图片栏目级雪碧图的名称按栏目级目录名命名，页面级雪碧图的名称按页面名称命名，组件类和皮肤类雪碧图同理，其它的可按表中的名称命名，这样方便区分和后期管理 。

（3）跨项目通用的组件或某个组件的图片内容较多、修改频繁，可以独立出一张组件图，按组件名命名，方便管理。

（4）如果站点的全局图标比较多，可以考虑将图标单独做一张雪碧图。建议图标使用一个新标签实现，而不是直接用有内容的那个标签设定图标背景，这样你需要给雪碧图图标与图标之间多留一些间距，另外遇到不同行高的时候，为了让图标背景垂直居中，还需要重新设定background-position，这种实现方式不利纳入全局样式。