a {
background: url(sprite.png) no-repeat;
display: block;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}设置高度和宽度可确保仅显示 sprite.png 图像的一部分。悬停时会改变背景图像的位置，从而显示图像的不同区域。
查看 Geoff Graham 在 CodePen 上的示例 KBjZwg（@geoffgraham）。
可能值得添加
a {text-indent: -9000px;}是的，如果您打算隐藏文本并只显示图像，则需要这样做。但是，仅仅因为它是精灵图并不自动意味着这就是目的。
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
Vlad，不需要 [background-position] 属性，您只需将位置“center top”附加到已声明的 background 属性即可。
这些资源真是太棒了！
//* 这是 vlad 的代码 *//
a {
display: block;
text-indent: -10000px;
background: url(sprite.png) no-repeat;
background-position: center top;
}
a:hover {
background-position: center bottom;
}
//* 我添加了一些内容：*//
a:active {
background-position: center center
}
所以：背景图像有 3 种状态
在为许多 CMS 软件包（如 WordPress 或 Joomla）设计动态文本链接时，如果链接的背景图像在悬停时发生变化，则可以使用此方法，但不会使用“text-indent”属性。
使用
span标签并在 CSS 中将其设置为display: none;会怎么样，而不是设置缩进？我认为 Benjamin 的方法可以实现，但这会妨碍屏幕阅读器。我知道与此相关的一些内容。;)
这可能是一个愚蠢的问题，但是如果您有一个水平导航按钮列表呢？您是否需要为每个按钮制作不同的图像？如果是这样，您是否必须为每个按钮指定一个类名？
我很确定我不明白我在说什么。:-)
谢谢，
M
也许您需要确保您的问题更清晰……
如果您想进行所有像素计算以确定背景位置，则可以将整个网站的所有图形都放在一个精灵图中。您仍然需要为每个按钮指定自己的类名，因为每个按钮在精灵图本身中的位置都不同。
我在我客户的网站上使用了相同的技巧，用于 http://www.toolshandles.com 中的图标链接。
我需要更多解释？:(
????
不确定我能否用英语解释清楚，因为英语不是我的母语，但我会尽量清晰地表达。
1- 在图像编辑程序（Photoshop）中，您将图像、图标等排成一行。最好计算出图像之间的相同距离。图标的尺寸应相同。
2- 您将图像加载到锚点中 -> 将其定义为块并定义图像（图标）的大小（宽度/高度） -> 您也可以在此处添加 background-position（用于鼠标移出状态）
3- 在鼠标悬停时，您定义一个新的 background-position，因此图像将更改状态。在我们的示例中，在悬停时，我们定义了 sprite.png 中图像的位置（坐标）。
我们为什么要这样做？
– 这样，我们只需在页面上加载一次包含所有状态的图标的图片，并多次使用它。该图像将被缓存并重复使用。
– 我们不必保存和使用许多具有 2-3 种状态的图像。
希望我的解释足够清楚。
干杯。
你的解释真的很好……
非常感谢
我一直在尝试弄清楚精灵图。如果能看到提示的效果会很有帮助。
我感到困惑，在所有这些示例中，我只看到每个示例中都有一张图像。
我以为精灵图总是包含两张图像？包含两张图像（悬停和静态 - 或悬停、静态和已使用链接）的精灵图的完整代码是什么？
提前感谢
Ian
你没有看到全局观，CSS 精灵图的理念是，你使用一个图像文件，其中包含两个并排或上下排列的图片，这并不重要，这取决于你，使用 CSS 向你的容器添加背景，然后使用伪类“hover”重新定位该图形，以产生容器内有两个图形的错觉。
如何在内联中使用它？我有一行文本，需要在其后跟随一个按钮，单击该按钮可以下载 PDF 文件。
也许使用两张图像而不是精灵图更容易？
如果精灵图的可见部分的尺寸适合侧边栏，例如，如果精灵图实际上比显示的图像更宽，那么整个精灵图是否有效？
谢谢，一旦我理解了 background-position 值，它就非常有效。
你好，这在响应式网站上有效吗？
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
由于宽度和高度是固定的，是否可以使其具有响应性？
谢谢，
chadtulio
必须有一种方法可以使用“%”而不是“px”来使其工作。只要您的背景图像缩放良好。
如果我能立即看到一个示例会更好！
精灵图可以任意大……所以如果图像为 50px x 50px，则您的图像画布可以为 1000px x 1000px，如果您愿意……所以如果您希望图像区域周围有大量空白，则可以……我通常将每个图像隔开 100px 块，纯粹是为了数学目的，并避免任何可能出现的其他图像显示在该 png 文件上的意外情况……
例如，如果我有一个菜单，每个菜单项的宽度为 250px，高度为 40px，那么如果它们并排放置，我确保精灵图中的每个图像之间至少有 300px 的距离……
你们都可以立即看到一个精灵图的示例。它被称为“Google”。就是这样。
它的工作原理就像一个蒙版，只根据你的标签宽度和高度显示图像。如果你有一个高度为100px，宽度为100px的图像文件，而你的社交图标大小为30px 30px，那么你可以这样写代码：
a{
dispaly:block;
background:url(images/sprite_file.jpg) left top no-repeat;
height:30px; /*根据图标高度大小/
width:30px; /*根据图标宽度大小/
text-indent:-9999999px;
}
a:hover{
background:url(images/sprite_file.jpg) left bottom no-repeat;
}
在悬停时，你可以在30px乘30px的蒙版区域看到文件底部部分，所以确保在prite.jpg的底部有你的悬停图像“
这是否只在悬停时有效，或者我是否可以将其设置为已访问状态？
Deborah 好的问题，我90%确定它只在悬停时有效，另外10%我会尝试一下。
CSS Sprites 已经存在很长时间了。在 alistpart.com 上阅读一篇更有趣和有教育意义的文章。
http://alistapart.com/article/sprites
// 我与 AListApart 没有关联；它只是我最热衷的 CSS 组件之一——我在 00 年代初就开始编写代码并为这种样式的菜单创建图形。
如果有人需要将图像转换为 CSS，此链接可以帮助他们
Base64 CSS 生成器
在线 base64 css，dataURI 生成器。轻松将您的图像转换为 base64 CSS、Data URI、XML。
http://www.base64css.com/
我写代码已经超过 20 年了，所以在您歇斯底里地大笑时请记住这一点。
我想将一些冗长的文本分成 3 或 4 个部分，并让用户在阅读完后移动它们。我想知道我是否可以使用图像精灵来做到这一点。另外，如果我这样做，是否必须将文本分解并保存每个部分作为图像？
我知道这是一篇旧帖子，但这正是我需要的。
如何使图像响应式？我已经尝试了一切，但我只得到一小部分图像。
它需要在高度和宽度上都缩小。
我尝试了 width: 100%，max-width: 625px 和 height: auto，但我什么也没得到。
尝试将“height:auto;”添加到 #divname img
非常感谢！
演示在哪里？
为你添加了一个。:)