css - 使用 Sprite 重复背景图像

Question

我已经阅读了这些主题，但我不知道如何找到答案。

问题是（对于身体）：

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

这行得通。

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

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

但我需要从 sprite 中获取 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; 

我以这种方式知道是不可能的。

你能帮助我吗？

提前致谢

Answer 1

这是不正确的：

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 个单独的图像，您将无法使用精灵来做到这一点。