CSS - 精灵作为背景图像

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中都是不可能的.