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