SpriteMe的安装十分之简单，只要把这个链接拖动到你的浏览器收藏夹就可以：SpriteMe – 当然你也可以马上点击一下试用一下。

与其它的一些CSS Sprites工具不一样，SpriteMe具有下面几特性：

1. 自动查找背景：SpriteMe有一个独门秘笈，可以容易的在页面内找出所使用的背景图片，同时会列出这些背景图片和使用它们的DOM元素。而不必像其它CSS sprites工具那样一个一个提交你的背景图。
2. 将背景图片按分组来产生CSS sprites：想用好CSS sprites，其实它背后的逻辑还是挺复杂的：比如横向重复的背景图不能跟纵向重复的背景放在同一张CSS sprites云云，有很多规矩，不过现在有了SpriteMe就可以忘记这些复杂的逻辑了，SpriteMe会自动将那些能放在一张CSS sprites的背景图放在一组，每一组最终产生一张CSS sprites背景图。
3. 会自动计算CSS的background-position。
4. 可以将产生的代码应用到当前页面：以前测试CSS sprites通常要把背景图保存，然后改CSS，然后再通过浏览器看效果。SpriteMe就不需要这样，当你点击“make sprites”的时候，代码立刻就应用到当前页面，让你逃离那些无趣的流程。

Steve大概是最早提出通过CSS sprites来提升网页性能的人，在使用CSS sprites方面经验丰富。基于这一点，有理由相信他所带来的工具也是经过了深思熟虑，同时也是久经考验，可以满足绝大多数开发者的需要。

以上都是废话，SpriteMe很简单，谁用谁知道！

另外，SpriteMe是开源的：http://code.google.com/p/spriteme/，你也可以去下载源代码建立自己的镜像。

然后，转载一偏关于CSS sprites的技巧（来自：http://blog.tugai.net/2009/03/31/css-spriting-tips，原文：http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/）：

提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数，为了减少HTTP请求次数，最直接有效的方法是使用精灵图片（CSS sprites），精灵图片是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

下面是一张精灵图片

本文的目的不是阐述精灵图片如何让网页下载更快，而是介绍在创建精灵图片时的一些实战经验。

不要等你完成所有工作后再开始使用CSS精灵

在网站全部完成后，你的CSS和图片也都已经创建好了，这时候你再使用CSS精灵，也就意味着你要返回重写CSS，并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片，这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵，那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解，我是在创建一张大的精灵图片中途失败后才意识到它的。假如一张图片应该出现在一个元素的左边，如下图

请将这张图片放在精灵的右边（看上面的示例精灵图片）。用这种方式处理后，当你用CSS移动背景图片时，不可能会有别的图片会（错误的）显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时，使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初，这一切都能正常工作，但是，一旦你的CSS精灵宽度或高度增加时，你刚才使用的定位方式就发现了错误，因为图片相对右边或者底边的距离已经发生了变化。所以，请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样，许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢？因为使用元素的地方可能包含各种不同的内容，这些内容会导致容器变宽变高，预留了足够的空白的话，在容器大小发生变化时，可以避免其他的图片显示出来。

这有一个例子：

每个列表都使用一个数字图片作为背景。看看上面的示例CSS精灵，你会发现这几张图片是交错排列的，这样处理后，不管怎么增加，其他的图片都不会显示出来。

不要担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站，那么你必定要将把很多图片放到精灵图片上，并且为这些图片预览出合适的空隙，这很好。精灵图片中的空白空隙不会增加太多文件的体积，在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000，但它仅16.7kb！

（注：事实上，这一点是有争议的：据称，使用CSS Sprites如果背景图片过大，渲染时需要大量的内存。）

CSS sprites两三事 | 暂无评论，添加评论
本文网址：http://xiaobin.net/200909/something-about-css-sprites/
将之典藏 - 厚积而薄发，© 2005-2009. 如无特别声明，适用署名-非商业性使用-相同方式共享 3.0授权，你可以署名使用全部或者部分内容用于非商业性目的。