CSS - 精灵作为背景图像

时间:2010-05-18 20:22:00

标签: css

我有一个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精灵用于背景等重复图像?

谢谢,

4 个答案:

答案 0 :(得分:8)

  

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

背景附件:固定的;

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

答案 3 :(得分:0)

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