Javascript CSS精灵是如何工作的？

我有3个不同的图像，想用CSS创建一个精灵。我知道这将减少HTTP请求。然而，我对这个概念完全陌生，不知道如何处理这个问题

对我来说，什么是最好的选择？我还看到了一些CSS精灵生成器，您可以在其中提交一个.zip图像，并将它们组合在一起

我试着这么做，但不明白发生了什么。任何关于创建和使用CSS精灵的指导都将不胜感激

---

更新：我已经阅读了A列表部分的文章，但我不太清楚。有人能提供一个使用CSS精灵的例子吗？[答案中的一个简短、独立的示例比其他地方的示例链接更可取。–ed.]

当您进行spring时，所有这一切意味着您的小图像都平铺在单个图像文件上。如果你有一个像样的图像编辑程序，你可以自己创建这个图像文件。然后，您可以使用css属性来指定要用于该精灵的图像片段。

看看他们用于iGoogle的图像片段。您只是将这些图像合并为一个大图像。这样你就可以提出一个请求。然后使用背景定位、高度和宽度来选择所需的图像部分

---

这也适用于在鼠标悬停时更改的图像，因为悬停状态已经下载并且没有任何延迟。

假设您有一个按钮，当鼠标悬停时，该按钮会更改其背景图像。鼠标移动需要立即发生，以便向用户提供良好的反馈。如果只是简单地在按钮上切换图像，浏览器可能必须转到服务器获取图像，这会破坏效果。通过使用CSS精灵，您可以加载每个图像，并立即启动按钮

此外，某些浏览器在切换图像时会“闪烁”。CSS精灵避免了这种有时可能发生的闪烁问题

---

（来源：）

您需要学习的示例如下：

#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是一个大图像，包含网格中所有较小的图像（不必是）。然后使用定位仅显示包含图像的精灵部分

---

有一些在线工具可以为给定的一组图像返回一个大的sprite图像，其中包含在哪里可以找到较小的图像的坐标。

我没有任何图像编辑程序，还有如何将不同的图像组合在一起，比如说，如果我有3个图像，中间有一些包含，例如，图1——一些包含——图2——一些内容——图3，现在我想合并所有这些图像，然后如何实现，这清楚吗？我已经阅读了这篇文章，但不是很清楚，请仔细阅读我的问题。你能给我举个例子，用CSS创建一个精灵吗？这会很有帮助。@Rachel:我发布的链接中提供了一个例子，你必须理解我的朋友。下面这些都是很好的例子。如果你仍然不明白，也许一个更大的问题就在眼前