CSS sprites 是如何工作的？答案

【问题标题】：How do CSS sprites work?CSS sprites 是如何工作的？
【发布时间】：2011-02-25 07:54:54
【问题描述】：

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

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

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

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

【问题讨论】：

下面这些都是很好的例子。如果你还是不明白，那可能是更大的问题了

标签： javascript css user-interface css-sprites

【解决方案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 是一个大图像，包含网格中的所有小图像（不一定是）。然后，您可以使用定位来仅显示精灵中包含您的图像的那部分。

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

【讨论】：

【解决方案2】：

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

_{（来源：css-tricks.com）}

【讨论】：

我已经阅读了这篇文章，但不是很清楚，请仔细阅读我的问题。你能给我一个例子，并使用 CSS 创建一个精灵，因为它会很有帮助。
@Rachel：我发布的链接中提供了示例，您必须了解我的朋友。

【解决方案3】：

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

【讨论】：

我没有任何图像编辑程序，我如何将不同的图像组合在一起，假设我有 3 张图像，并且在它们之间我有一些包含，例如。图片 1 -- 一些包含 -- 图片 2 -- 一些内容 --- 图片 3，现在我想合并所有这些图片，那么如何做到这一点，清楚吗？

【解决方案4】：

在此处查看他们用于 iGoogle 的 Google's sprite。您只是将图像组合成一张大图像。这样你就提出了一个要求。然后，您可以使用背景定位以及高度和宽度来选择您想要的图像部分。

这对于悬停时更改的图像也非常有效，因为悬停状态已经下载并且没有任何延迟。

【讨论】：

【解决方案5】：

假设您的按钮在鼠标悬停时会更改其背景图像。鼠标悬停需要立即发生，以便向用户提供良好的反馈。如果你只是简单地切换按钮上的图像，浏览器可能不得不去服务器获取图像，这会破坏效果。通过使用 CSS sprite，您可以立即加载每个图像并准备好在按钮上运行。

此外，当您切换图像时，某些浏览器会“闪烁”。 CSS sprites 避免了这种有时会发生的闪烁问题。

【讨论】：