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

在最近的一个Stackoverflow播客中,Jeff谈到了一个单独的图像文件,其中包含遍布整个页面的所有小图像,然后使用CSS剪切它,以便正确显示所有图像.重点是减少服务器请求的数量,以便更快地加载页面.我就像"哇,真的很酷,我真的可以在我们的产品中使用它".

我的问题是:如何用CSS完成这项工作？我需要用背景图像加载图像,但是如何指定大图像中子图像的偏移？也就是说,假设大图像中有一个锤子图标(50px,50px),并且它的大小为32px*32px,我怎么能强制浏览器只显示那个位？

基本上,您使用单个图像作为背景图像,但通过要显示的图像的偏移将其移动(向左和向上).例如,显示锤子图标:

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

但据我所知,你必须确保使用背景图像的元素具有正确的大小(例如32x32像素).

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