我有 3 个不同的图像，想使用 CSS 创建一个精灵。我知道这会减少 HTTP 请求。但是，我对这个概念完全陌生，不知道如何处理这个问题。
对我来说最好的选择是什么？我还看到有一些 CSS sprite 生成器，您可以在其中提交 .zip 图像并将它们组合在一起。
我试着这样做，但不明白发生了什么。任何有关创建和使用 CSS 精灵的指导将不胜感激。
更新：我已经阅读了 A List Part 文章，但对我来说不是很清楚。有人可以提供一个使用 CSS 精灵的例子吗？[对于SO来说，答案中一个简短的、独立的示例比仅仅链接到其他地方的示例更可取。-编辑]
您需要学习的示例如下：
#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Sprite.gif 是一个大图像，包含网格中的所有较小图像（不一定是）。然后，您使用定位来仅显示包含您的图像的精灵的那部分。
有一些在线工具可以给定一组图像，返回一个大精灵图像，其中包含在哪里可以找到较小图像的坐标。
当您进行精灵时，这意味着您的小图像平铺在单个图像文件上。如果你有一个像样的图像编辑程序，你可以自己创建这个单一的图像文件。然后，您可以使用 css background-position属性来指定要用于该精灵的图像片段。
在此处查看他们用于 iGoogle的Google 精灵。您只是将图像组合成一张大图像。这样你就提出了一个要求。然后，您可以使用背景定位以及高度和宽度来选择您想要的图像部分。
这对于悬停时更改的图像也非常有效，因为悬停状态已经下载并且没有任何延迟。
假设您有一个按钮，它在鼠标悬停时会更改其背景图像。鼠标悬停需要立即发生，以便向用户提供良好的反馈。如果你只是简单地切换按钮上的图像，浏览器可能不得不去服务器获取图像，这会破坏效果。通过使用 CSS sprite，您可以立即加载每个图像并准备好在按钮上运行。
此外，当您切换图像时，某些浏览器会“闪烁”。CSS sprites 避免了这种有时会发生的闪烁问题。
