CSS - 雪碧图作为背景图片

Question

我正在努力提升一个网络应用的性能。为了达到这个目的，我决定使用CSS精灵技术。我将所有的图片都放在一个名为images.png的.png文件中。

对于那些只需要显示一次的图像，CSS精灵技术效果很好。但是，我的一些图片需要重复使用。例如，我有一个用作横幅背景的banner.png图像。每当我设置background-repeat属性时，似乎图片不会重复。以下是我的CSS定义：

Before CSS Sprites
------------------
.ghwc {
  background-image: url(/images/layout/banner.png);
  background-repeat:repeat-x;
  color:White;
  width:300px;
}

After CSS Sprites
-----------------
.ghwc {
  background-image: url(/images/images.png);
  background-repeat:repeat-x;
  color:White; 
  background-position:60px 319px; 
  width:300px;
}

我的问题是，如何使用CSS精灵来处理像背景这样的重复图片？

谢谢。

- user208662

Answer 1

我的问题是，如何使用CSS精灵来重复像背景这样的图像？

你不能用CSS精灵来完成这个任务。要实现这一点，您需要能够指定要重复的图像区域，而我所知道的是在CSS 2和3中都不可能做到这一点。

- Pekka

---

你可能可以使用只在一个方向上重复的图像，但这似乎并不值得花费这样的精力。我们需要支持压缩图像... - Matti Virkkunen

@Matti 是的，或者说多部分响应也可以。 - Pekka

你可以创建一堆带有精灵背景作为背景的div，设置宽度和高度，然后在顶部放置一个绝对定位的div :D 但是，如果你这样做，我相信某个地方会有一只独角兽被谋杀。 - Jason

@Jason，你需要开始克隆绝对定位的DIV来实现“重复”效果，可能需要借助一些jQuery。我认为一个独角兽不够，听起来更像是一群:D - Pekka

Answer 2

如果你只是使用background-repeat:repeat-x;，就像这个例子一样，你只需要让所有的背景都包含在精灵图像容器中，并且它们的宽度相同，将精灵图像文件垂直布局。然后，你的背景位置属性将始终使第一个x位置为0，而精灵图像位于第二个y位置（例如：background-position:0 0; background-position:0 -100px; background-position:0 -200px;等）。如果你无法指定确切的高度并设置overflow:hidden，则可能无法在所有浏览器上正常工作。

- mVChr

Answer 3

假设您的背景图片（images.png）已显示，您的代码应该能够正常工作。如果您希望在Opera和Firefox上正确呈现此内容，则需要添加

background-attachment:fixed;

编辑：我刚意识到您可能正在谈论由几个“图像”组成的“精灵”图像中的特定坐标集。您不会得到任何一个特定区域的图像来重复显示。将图像裁剪为您关心的大小，然后使用您拥有的代码。

- user164226

---

我认为这不是他的问题，他现在想将该结构用作背景图像 - 据我所知这是不可能的。 - Pekka

是的，编辑后反映了这一点。起初没有意识到他在谈论什么。 - user164226

Answer 4

如果您想使用repeat-x，那么您不能在精灵中将几个图像放在一起，因为整个精灵会在x方向上重复（正如您已经注意到的那样）。但是您可以将它们放在一个垂直线上。（如果您想使用repeat-y，则反之亦然。目前还没有类似于“background-crop”的东西（也许在CSS4中？;））

- Ria Weyprecht