我有3个不同的图像，并希望使用CSS创建一个精灵。我知道这会减少HTTP请求。然而，我对这个概念完全陌生，不知道如何解决这个问题。CSS精灵如何工作？
对我来说最好的办法是什么？另外我看到有一些CSS sprite生成器提供一个.zip的图像，并将它们结合起来。
我试过这样做，但不明白发生了什么事。任何有关创建和使用CSS精灵的指导将受到高度赞赏。
更新：我已经通过A列表部分的文章，但它不是很清楚。有人可以提供一个使用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 Sprites: Image Slicing’s Kiss of Death
我已经阅读了文章，但对我来说并不是很清楚。你能用一个例子来解释一下CSS Sprites的用例吗？ – Rachel 2010-05-28 21:14:49
当你这样做是拼合，你小的图像上一个图像文件平铺它的意思。如果你有一个体面的图像编辑程序，你可以自己创建这个单一的图像文件。然后，您可以使用css background-position属性指定要用于该精灵的图像片段。
我没有任何图像编辑程序，我怎样才能将不同的图像聚合在一起，比方说，如果我有3个图像，并在两者之间，我有一些包含，例如。图片1 - 一些包含 - 图片2 - 一些内容---图片3，现在我想合并所有这些图片，以及如何做到这一点，这是否清楚？ – Rachel 2010-05-28 21:23:00
看这里他们用于iGoogle的Google's sprite。你只是将图像合并成一个大的图像。这样你提出一个请求。然后使用背景定位和高度和宽度来选择想要的图像的哪一部分。
由于悬停状态已经下载并且没有任何延迟，因此这对于在悬停时更改的图像也非常适用。
比方说，你有一个按钮，当它被掩盖时，它会改变它的背景图像。鼠标需要立即给用户提供良好的反馈。如果您只是简单地切换按钮上的图像，浏览器可能不得不去服务器获取图像，这会破坏效果。通过使用CSS精灵，您可以加载每个图像并准备立即进入按钮。
此外，当您切换图像时，某些浏览器会“闪烁”。 CSS精灵可以避免这种有时会发生的闪烁问题。
下面这些都是很好的例子。如果你仍然不明白，可能是一个更大的问题 – Jason 2010-05-28 21:38:16