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

Question

在最近的一个 Stackoverflow 播客 中，Jeff 谈到了拥有一个单一的图像文件，其中包含遍布整个页面的所有这些小图像，然后使用 CSS 对其进行剪切，以便所有图像都能得到正确显示。重点是减少服务器请求的数量，以便更快地加载页面。我当时想“哇，这真的很酷，我真的可以在我们的产品中使用它”。

我的问题是:如何使用 CSS 完成此操作？我需要使用背景图像加载图像，但是如何指定大图像中子图像的偏移量？也就是说，假设在(50px, 50px)处的大图中有一个锤子图标，大小为32px * 32px，如何强制浏览器只显示该位？

Answer 1

基本上，您使用单个图像作为背景图像，但将其移开(向左和向上)您要显示的图像的偏移量。例如。显示锤子图标:

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

但据我所知，您必须确保使用背景图片的元素具有正确的尺寸(例如 32x32 像素)。

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