Question

我有一个Web应用程序，其性能我正在努力增强。为了做到这一点，我决定使用css sprites。我已将所有图像放在名为images.png的.png文件中。

CSS sprites适用于只显示一次图像的所有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精灵用于背景等重复图像？

谢谢，

Answer 1

我的问题是，如何将CSS精灵用于背景等重复图像？

你没有。使用CSS sprites是不可能的。要做到这一点，你必须能够指定要重复的图像区域，据我所知，这在CSS 2和3中都是不可能的。

Answer 2

如果您只是background-repeat:repeat-x;，则可以执行此操作，只需要在精灵图像容器中包含相同宽度的所有背景，并将精灵图像文件垂直放置。然后你的背景位置属性将始终具有第一个x位置为0并且精灵位于第二个y位置（例如background-position:0 0; background-position:0 -100px; background-position:0 -200px;等）。如果您无法指定确切的高度并设置overflow:hidden。

，则可能无法在所有浏览器中使用

Answer 3

假设您的背景图片（images.png）完全显示，您的代码应该有效。如果您希望在Opera和Firefox上正确呈现，则需要添加

背景附件：固定的;

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

Answer 4

如果你想使用repeat-x，你不能在精灵中将几个图像放在一起，因为整个精灵在x方向上是重复的（正如你已经注意到的）。但你可以将它们放在一条垂直线上。（反过来如果你想使用repeat-y。到目前为止还没有像“background-crop”这样的东西（可能在CSS4中？））

CSS - 精灵作为背景图像

4 个答案: