Question

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

我的问题是：如何使用CSS完成？我需要使用background-image加载图像，但是如何指定大图像中子图像的偏移量？也就是说，假设大图像中有一个锤子图标（50px，50px），并且它的大小为32px * 32px，我怎么能强制浏览器只显示那个位？

Answer 1

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

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

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

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

Answer 2

它被称为css sprites。

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

stackoverflow Blog

中有更多信息

这是一个不错的发电机：http://www.csssprites.com/

Answer 3

你知道答案......在这种情况下请谷歌查看google搜索结果页面的来源，使用像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）都具有固定的高度和宽度。并且都指定（不同的）backgroup-position's。

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

3 个答案: