0

我的应用程序中有一个元素需要三个不同的背景，这些背景应该水平堆叠（？），一个接一个。

SliceA 是 3 个中的第一个，宽度为 66px，然后我希望 SliceB 在 SliceA 结束后立即开始，并重复-x 直到它在 SliceC 开始之前停止（最后一个切片有 21px - 如果重要的话）。

现在，如果我这样做：

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;

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

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

4

1 回答 1

1

如果您的图像没有任何透明度，那么只要您更改背景的顺序（即将中间的重复背景移动到列表中的最后一个），您所拥有的就会起作用，例如这里。在此示例中，背景图像确实具有透明背景，这使您可以看到重叠的背景。您可能想测试它的浏览器兼容性，它适用于 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属性，例如：

    background-clip: border-box, border-box, content-box;
    -webkit-background-clip:border-box, border-box, content-box;
    padding: 0 66px;
于 2012-11-14T20:33:48.777 回答