9

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

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

4

3 回答 3

10

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

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

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

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

于 2009-02-03T15:57:01.333 回答
4

它被称为css sprites。

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

stackoverflow 博客中有更多信息

这是一个不错的生成器：http ://www.csssprites.com/

于 2009-02-03T15:54:11.620 回答
3

你知道答案...问google 在这种情况下查看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。

于 2009-02-03T16:03:57.840 回答