Question

我已经阅读过这些线索，但我不知道如何找到答案。

问题是（对于身体）：

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

这很有效。

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

  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;

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

你能帮助我吗？

提前致谢

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个separet图像，你不能用精灵来做。

用Sprite重复背景图像

1 个答案: