【CSS】CSS Sprites，如何来规划?

先看一张图：

1. 一个页面一般会加载多少张css背景图？
2. 一般会有哪几种类型的雪碧图？
3. 雪碧图的尺寸该设置多大？如何排列？
4. 雪碧图在站点中如何分布？

是否曾经烦恼过以上几点问题？带着上面几点问题，我们一起来探讨站点的雪碧图该如何规划比较合理。

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

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

好像有点乱，让我们分下类。

按雪碧图使用的作用域可分为：跨项目通用、全局、栏目级、页面级

按雪碧图实现方式可分为：固定尺寸雪碧图、横铺雪碧图、竖铺雪碧图(比较少用)、横竖平铺背景图(比较少用)

 那么，再把我们回想的素材图归下类：

按作用域：这些素材在不同站点都有可能出现在不同作用域中

按实现方式：

• 固定尺寸雪碧图：按钮、图标、其它固定尺寸背景图、颜色鲜艳且尺寸较大的背景图
• 横铺雪碧图：横铺背景图、左右自适应背景图(不使用九宫格的实现方式)
• 竖铺雪碧图：竖铺背景图、上下自适应背景图(不使用九宫格的实现方式)
• 横竖平铺背景图：这种图不能合成雪碧图，一般用于网页背景花纹，大部分站点比较少出现

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

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

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

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

1.  横铺图宽度使用20px, 使用1px宽度横铺会有渲染性能问题，竖铺同理。我就不详细说明了，网上搜索，有相关示例。
2. 固定尺寸的雪碧图一般可设定为宽度是网页宽度的一半，高度随图片内容增长。因为切图前你可能不确定用多大尺寸，我的见解是，到切图后期你可能不需要单独用一张repeat-x.png的图放左右自适应的背景图，多数情况我们会用2个标签采用滑动门的方式实现左右自适应的背景，而页面宽度的一半即可实现最大宽度的左右自适应背景，那么这时你可以把左右自适应的背景放进这张雪碧图中了
3. 拼合图片时固定尺寸的图与图之间相隔1像素，避免浏览器放大时，尺寸多计算1像素时可见到临近的图片
4. 栏目级雪碧图的名称按栏目级目录名命名，页面级雪碧图的名称按页面名称命名，组件类和皮肤类雪碧图同理，其它的可按表中的名称命名，这样方便区分和后期管理
5. 跨项目通用的组件或某个组件的图片内容较多、修改频繁，可以独立出一张组件图，按组件名命名，方便管理
6. 如果站点的全局图标比较多，可以考虑将图标单独做一张雪碧图
7. 建议图标使用一个新标签实现，而不是直接用有内容的那个标签设定图标背景，这样你需要给雪碧图图标与图标之间多留一些间距，另外遇到不同行高的时候，为了让图标背景垂直居中，还需要重新设定background-position，这种实现方式不利纳入全局样式

以上是个人的一些经验和观点，仅供参考，大家对雪碧图的规划有什么好的建议和看法，欢迎留言一起探讨。

转载地址：http://www.w3cfuns.com/article-1286-1.html