Question

我的应用上有一个元素需要三个不同的背景，应该水平堆叠（？），一个接着另一个。 SliceA是3中的第一个，是66px宽，然后我想在SliceA结束后立即启动SliceB，并且重复-x直到它在SliceC开始之前停止（并且这个最终切片具有21px-如果它重要）。 / p>

现在如果我这样做：

background-image: url('imgs/hint1_sliceA_66x29.png'), url('imgs/hint1_sliceB_1x29.png'), url('imgs/hint1_sliceC_21x29.png');
background-repeat: no-repeat, repeat-x, no-repeat;

实际上，SliceB将在x轴上重复，但是在整个元素的宽度上重复（请注意，这些切片具有透明度，因此您最终可以看到其中一个背景切片是否在另一个切片下面）。无论如何，我天真地试过这个：

background-position: left bottom, 66px -21px bottom, right bottom;

但它显然不允许我定义其中一个背景元素的左右边距。

有没有人有解决方法如何实现这一目标？有任何想法吗？谢谢！

Answer 1

如果您的图像没有任何透明度，那么只要您更改背景的顺序（即将中间重复背景移动到列表中的最后一个），example here，您所拥有的图像就会起作用。在此示例中，背景图像具有透明背景，可用于查看重叠背景。您可能希望对此进行测试以获得浏览器兼容性，它可以在Linux上的Chrome和Firefox中使用。

    background-image: 
        url('imgs/hint1_sliceA_66x29.png'),
        url('imgs/hint1_sliceC_66x29.png'),
        url('imgs/hint1_sliceB_66x29.png');
    background-position: left bottom, right bottom, left bottom;
    background-repeat: no-repeat, no-repeat, repeat-x;

如果不是这种情况且您的情况允许，将图像转换为没有透明元素的图像可能最简单。

或者，您可以使用填充和background-clip属性example：

    background-clip: border-box, border-box, content-box;
    -webkit-background-clip:border-box, border-box, content-box;
    padding: 0 66px;

水平堆叠不同的背景图像？

1 个答案: