用雪碧重复背景图片

我已阅读过这些线程，但我不知道如何找到答案。用雪碧重复背景图片

的问题是（身体）：

background: url('image1.png') top left repeat-x, 
     url('image2.png') bottom left repeat-x, 
     #eeeeee;

这工作。

我该如何在精灵中设置这些图像？因为我可以得到图像形式精灵为：

background-position: -211px -0px; width: 8px; height: 110px;

但我需要从精灵获得image1.png或image2.png，我还需要在x重复的图像。例如：

background: url('image1.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
     url('image2.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
     #eeeeee;

我知道这样做是不可能的。

你能帮我吗？

在此先感谢

来源

2013-02-04 Carles Costa

我已经尝试过这之前，我不认为这是可能的，截至目前为止。当你使用精灵图像时，你可以指定它的'x，y，width，height'值。对于重复的图像，您不需要，因此我认为最好有2个独立的图像，例如'sprite.png'' bg.jpg'。我知道这是一个额外的HTTP请求，但它是一个非常小的请求。有一个名为'-image-rect'的属性，但它并没有被广泛使用。 – ashley

类似的东西： http://www.phpied.com/background-repeat-and-css-sprites/ 但在这种情况下，对3个的div，我neew为一体的... 由于阿什利 –

这种技术只允许你“repeat-x”或“repeat-y”。如果你指定了'-x'，那么你的其他精灵必须在下面，如果你指定'-y'，那么他们将需要在它旁边，如果你明白我的意思 – ashley

这是不正确的：

background: url('image1.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
    url('image2.png') "-211px -0px; width: 8px; height: 110px" repeat-x, 
    #eeeeee;

相反，你应该这样写：

background: url('image1.png') repeat-x -211px -0px/8px 110px, 
    url('image2.png') repeat-x -211px -0px/8px 110px; 
background-color: #eeeeee;

但是，你需要2幅separet图像，你不能做它与一个精灵。

来源

2013-02-06 08:23:53

用雪碧重复背景图片

回答

相关问题