开始在您的项目中使用 CSS 精灵图
4.69/5 (9投票s)
本文将向您展示如何以某种方式实现 CSS 精灵图。
我们悬停在图片上，另一张图片就会显示出来。 这不是本帖的重点，而是向您展示看起来像两张图片的实际上只有一张。
引言
本文旨在向您展示如何在 Web 项目中开始使用 CSS 精灵。 它很有用，因为它减少了页面的加载时间，因为加载的图片更少，从而降低了服务器的负载。
背景
在我看来，使用 CSS 精灵一直被认为是一件非常困难的事情。 我从未理解过 background-position 是如何工作的以及如何使用它。 但是，通过一些研究以及我正在开发的 Web 项目的优化需求，CSS 精灵非常有用，我无法排除这种可能性。
如果您不知道，CSS 精灵就是只使用一张包含两个或多个图像的图像，然后我们使用 CSS 的 background-position 属性来定位我们想向用户显示的图像。
这是一张宝可梦图片精灵（我不是宝可梦粉丝，请注意）。 如果我们将每张图片分开，您能想象出会有多少个请求被客户端打开吗？ 如果同时有太多访问，服务器会很快过载！ 只使用一张图片只有一个打开的请求，并且只下载一个文件。
这项技术被亚马逊、苹果、推特、Facebook 以及了解其重要性的开发者所使用。
使用代码
要理解 CSS 精灵，我们需要理解数学中的图。 不需要长篇大论，只需要知道它是如何工作的。
笛卡尔坐标系是由法国数学家、哲学家和物理学家勒内·笛卡尔创造的。 他得出结论，我们可以通过 X 和 Y 坐标来定位确定区域中的任何事物。
您很久以前在学校就学过这些，还记得吗？ (转载 / SparkNotes)
X 坐标代表水平位置。 Y 坐标代表垂直位置。
如何在现实生活中应用它？
您想帮助您的朋友在您的浴室里找到一件东西（也许是您的牙刷？）。 您可以告诉他：“它在剃须刀和牙膏旁边，在衣柜里”。
但是他是葡萄牙人，他什么也听不懂。 如果您懂葡萄牙语，您可以说“Escova de dentes”，但您可能不懂。 因此，如果您已经绘制了浴室地图（如果还没有，今天就做！），您就可以用笛卡尔坐标系来给出牙刷的位置。
打电话告诉他：“它在 (2,3)” 他就能找到。 但是如何找到呢？
您不是说它附近有什么（剃须刀和牙膏），而是说出它的坐标。 他只需要跟着它就能找到您要找的东西。
这仅相对于您的浴室而言！ 但如果我们愿意，我们可以创建一个宇宙的笛卡尔坐标系，对所有恒星进行编目，然后，要访问它，我们只需要遵循它的坐标。 仅限所有物质或可测量的事物，好吗？ 不要试图用笛卡尔坐标系来描绘您的感受。
当我们告诉他“它在 2,3”时，我们说“我的牙刷在水平 (X) 位置2，垂直 (Y) 位置3”。
因此，笛卡尔坐标系的通用形式是：牙刷(X,Y)，其中牙刷是我们给点起的名称。 通常，我们只使用一个字母（A, B, C, D），但它可以是任何您想要的。 请注意，它不一定只是整数。 也可以是小数（0.5）、分数（1/2）等。
好的，我该如何将其用于 CSS 精灵？
它的工作方式相同！ 我们只需要将图像视为笛卡尔坐标系，然后使用像素来指定 X 和 Y 位置。
我们将在本文中使用下面的图片（如果您愿意，可以下载并使用它）
请注意，它具有透明背景，通常所有您看到的 CSS 精灵都使用透明背景（只有 GIF 和 PNG 支持透明度）。“但为什么？”
我们可以使用带有空白背景或任何其他颜色的 CSS 图像（例如在画图工具中制作），但如果我们尝试将其应用于深色背景，我们就会遇到这种情况
只有在您不打算在不同背景颜色上使用图像，并且 JPEG 文件大小低于 PNG 和 GIF 文件大小时（仅那时支持透明度），才使用非透明背景。
如果您还没有照片编辑器，我推荐您下载Fireworks（在我写这篇文章时，它是 CS6 版本）。 它是一款付费产品，但对 Web 开发非常有帮助（是一款图像编辑器）。 它由 Photoshop 的生产商 Adobe 开发。
如果您无法支付费用，可以使用 GIMP 创建一个透明的 PNG 图像（如果您每天都开发网站，它就值这个价！），但您需要搜索一下如何在 Google 上进行操作。 如果您安装了 Photoshop，请随意使用它，但请注意，该过程可能与 Fireworks 不同，我无法帮助您（我还不知道如何使用 Photoshop，但我真的在努力学习！）。
如果您选择 Fireworks，请打开它。 点击文件 > 新建。 使用宽度：500 和高度：500，并选择透明背景。
这将创建一个大图像！ 但不用担心，我们稍后会减小它的宽度和高度。 在其中，拖放您想添加到 CSS 精灵的所有图像。 在我们的示例中，我们将使用 2 张图片。
如果添加的图像没有透明背景，您可以使用魔棒工具删除背景。 如果需要更精确的方法，您可以使用套索工具手动删除背景。 它们在下图的红色部分标记。
添加图像（并在需要时对其进行编辑）后，选择它们并按Ctrl + G，它们将合并成一张图像，如下图所示。
请确保它们彼此靠近（以占用更少空间，使图像加载更快），但不要太近！ 留出一些间隔（大约10px。 根据您应用 CSS 精灵的图像，可以少或多）。
如果您不留出一些间隔，我们的 CSS 精灵将产生这样的结果
请注意，第一张图像上出现了第二张图像的一部分。
现在，按Ctrl + X（剪切）然后点击文件 > 新建，Fireworks 将创建一个与我们剪贴板区域中的图像具有相同宽度和高度的图像。
保存之前您可以对其进行优化（在 Fireworks 中使用右侧的优化栏），但这并不是本文的重点。
编码部分
现在我们有了图像。 让我们尝试用它制作我们的第一个 CSS 精灵！ 回顾一下，就是这个
从第一张图像（黑色放大镜）开始，使用 CSS
CSS
.searchBtn {
background: url('search.png') no-repeat 0px 0px;
width: 12px;
height: 13px;
}
它将返回第一张图像
现在我们需要理解它是如何工作的，从 background-position 的语法开始
background-position: x-pos y-pos;
这是因为我们在继续发帖之前就开始学习笛卡尔坐标系了！ 道理就在于此。 第一个值（0）是X（水平）位置，第二个值是Y（垂直）位置。
但我知道，这还不够清楚！ 我们需要将其可视化为像素视图
最初，我们需要想象图像在笛卡尔坐标系中（始终位于中心 [0, 0]）。
请注意，在 CSS 中我们使用 background-position: 0px 0px;
通过它，我们告诉图像在水平位置 (X) = 0 处读取。 之后，我们使用了宽度属性，表示要显示的是从水平点（0）开始的 12 个像素。
background-position 的第二个值是垂直位置 (Y) = 0，我们使用高度来读取其下方的 13 个像素。
现在让我们尝试读取第二个！
.searchBtn:hover {
background: url('search.png') no-repeat -20px 0px;
width: 12px;
height: 13px;
}
使用它，当我们悬停按钮时，将得到（）
这太神奇了！ 现在您应该更清楚了，但让我们再用一张图片来更好地理解它是如何工作的！
请注意，我们使用了 background-position: -20px 0px;
这意味着X（水平）位置将是20px，Y（垂直）位置将是0px。 请注意，在下面的图片中很容易看到。
这意味着我们将从20px之后开始读取图像（拉出黑色放大镜，因为它现在无关紧要）。 在此位置之后，它将读取其后的12px（水平方向），如宽度中所述。
在Y位置（0）之后，将读取其下方的13px，如高度中所述。
请注意，仅仅因为 Y 在本文中没有接受任何其他值，并不意味着它不可能！
那么，每次我想使用 CSS 精灵时都要手动操作吗？
不！ 有 2 种选择。
如果您使用Fireworks，它有一个内置插件。 使用选框工具（红色）并选择您想要的图像部分坐标。 它将在宽度和高度旁边显示（蓝色）。
另一个选择是 Sprite Cow (http://www.spritecow.com/)。 您只需上传图像并选择您想要的图像部分坐标。 它将为您提供完整的 CSS，我用它来写这篇文章。
关注点
一开始理解它真的很令人沮丧，而且我自从开始编程以来就一直避免使用 CSS 精灵。 但是，当您开始理解它是如何工作的时，它确实非常有趣且有用。
只有在开发完网站后才制作您的 CSS 精灵。 这是因为与分离的文件相比，在之前更改图像有点困难。
Fireworks 有一个我们在这篇文章中没有使用的内置功能，称为优化。 请使用它，而不是文件 > 另存为...，因为它会保存而不会丢失质量并且将来可编辑，从而使其很大。 保存原始文件，但将优化后的图像上传到您的服务器！
尽量占用最少的空间！ 否则，空间会随着无用内容而增加。
我建议仅将 CSS 精灵用于图标（如帖子顶部的宝可梦以及帖子中的放大镜示例），而不是用于宽度和高度很高的图像。
如文章所述，您可以使用非透明背景，但前提是您确定不会将此 CSS 精灵图像用作您在图像中使用的其他颜色的背景。 我建议您仅在 JPEG 图像大小小于 GIF 或 PNG 时才这样做。
历史
- 2012 年 12 月 16 日：文章发布。
- 2012 年 12 月 18 日：更新