javascript - CSS Sprite 是如何工作的？

Question

我有 3 个不同的图像，想要使用 CSS 创建一个 Sprite 。我知道这会减少 HTTP 请求。然而，我对这个概念完全陌生，不知道如何解决这个问题。

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

我尝试这样做，但不明白发生了什么。任何有关创建和使用 CSS Sprite 的指导都将受到高度赞赏。

更新:我已经阅读了 A List Part 文章，但对我来说不是很清楚。有人可以提供一个使用 CSS sprite 的例子吗？ [对于 SO 来说，答案中的简短、独立的示例比仅链接到其他地方的示例更可取。 –编者。]

Answer 1

您需要学习的示例如下:

#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 中包含图像的部分。

有一些在线工具，给定一组图像会返回一个大 Sprite 图像，并带有在哪里可以找到较小图像的坐标。