CSS - 精灵作为背景图像

问题描述：

我有一个Web应用程序，我正在努力提高其性能。为了做到这一点，我决定使用CSS精灵。我已将所有图像放在名为images.png的.png文件中。CSS - 精灵作为背景图像

CSS sprites对于只显示一次图像的所有css类都有效。但是，我的一些图像需要重复。例如，我有一个用于横幅背景的banner.png图像。每当我设置背景重复属性，似乎图像不会重复。为了表示我的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精灵重复相似图片的背景？

谢谢

答

我的问题是，我该如何使用CSS精灵重复相似图片的背景？

你不知道。这根本不可能使用CSS精灵。要做到这一点，你就必须要能够指定是要重复的图像的某个区域，而据我所知，在这两个CSS 2和3

你也许可以蒙混过关的图像，只在一个方向重复，但它听起来不像是值得的。我们需要支持打包图像... – 2010-05-18 20:25:52

@Matti yup，或多部分响应的事情。 – 2010-05-18 20:26:27

你可以创建一个带有spr背景的div作为bg，设置宽度和高度，然后在顶部有一个绝对定位的div：D但是如果你这样做，我很确定某个地方有独角兽谋杀 – Jason 2010-05-18 20:41:20

答

是不可能的假设背景图像（images.png）根本显示，你的代码应该可以工作。如果你想在Opera和Firefox上正确渲染，你需要添加

background-attachment：fixed;

编辑：我只是意识到你可能是在谈论一个特定的坐标在“精灵”的形象由几个“图像”的设置。你不会得到任何一个图像的特定区域重复这样的。将图像裁剪为您所关注的尺寸，然后使用您拥有的代码。

我不认为这是他的问题，而是他现在想要使用该结构作为背景图像 - 这是不可能的，只要我可以看到。 – 2010-05-18 20:30:54

是的，编辑来反映这一点。最初没有意识到他正在谈论的是什么。 – 2010-05-18 20:32:44

答

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

答

如果你想使用重复-X，你不能把几个图像彼此相邻在你的精灵作为整个精灵在X方向重复（因为你已经注意到了）。但是你可以把它们放在一条垂直线上。（身边，如果你想使用重复-Y的另一种方法有没有像“背景作物”到现在为止（也许在CSS4;？））

CSS - 精灵作为背景图像

相关推荐