Html 单个图像文件，用于存储页面上的所有小图像

在最近的一个Stackoverflow播客中，Jeff谈到了使用一个图像文件，其中包含页面上所有的小图像，然后使用CSS对其进行剪切，以便正确显示所有图像。关键是减少服务器请求的数量，以便更快地加载页面。我想“哇，太酷了，我真的可以在我们的产品中使用它”

我的问题是：如何使用CSS实现这一点？我需要将图像与背景图像一起加载，但如何在大图像中指定子图像的偏移量？也就是说，假设在（50px，50px）的大图像中有一个锤子图标，其大小为32px*32px，我如何强制浏览器仅显示该位？

它被称为

我基本上是游戏编程中使用的一个老把戏，你加载一个位图，其中包含你需要绘制的某个项目的所有“状态”，其优点是这样可以预加载图像，在css的情况下，当你需要实际使用它时，不会有延迟，它通常通过使用图像作为元素的背景，并在：hover、：active和“normal”类上应用不同的偏移和边界来实现

有更多的信息在

---

这里有一个很好的生成器：

基本上，您可以使用单个图像作为背景图像，但可以根据要显示的图像的偏移量将其移开（向左和向上）。例如，要显示锤子图标：

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

但据我所知，您必须确保使用背景图像的元素具有正确的大小（例如32x32 px）

---

搜索CSS精灵将为您提供更多信息。

您知道答案。。。在这种情况下，请谷歌使用firebug之类的工具查看谷歌搜索结果页面的源代码，你会发现

.w10 
 background-position:-152px 0;
}
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
 background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
 border:0 none;
 cursor:pointer;
 height:16px;
 margin-left:8px;
 vertical-align:bottom;
 width:16px;
}

---

因此，所有w10、w11、w20等都共享相同的图像（nav_logo4.png），它们都有固定的高度和宽度。并且都指定了（不同的）后台组位置。

非常感谢！你赢了一个互联网！谢谢，我在哪里可以下载我所指的那篇文章