不多说啥了。在网上看到这篇文章，难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了，但。那都是直接拿来用的，并没有深刻的研究过。今天这里终于看到一个有注释的，就贴上来看看。
这种用法，是被YAHOO所推荐的。因为。这样的用法，降低了图片的下载量。而且并在一起，并不会给图片的大小增加很多。
原文：http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢
图片文件为：
首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.
比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:
CSS代码
- li {
- height: 12px; /* 这个高度等于每个小图标的高度 */
- line-height: 12px; /* 这个同上. 但只是有些时候需要写这个而已. */
- background: url('icons.gif') 0 -12px; /* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */
- padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */
- padding-bottom: 0; /* 这个也一样.. */
- padding-left: 14px; /* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */
- margin: 2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */
- overflow: hidden; /* 在有些情况下需要写这个. 具体作用我就不多解释了. */
- }
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..
如果不明白可以问问原作者。。。