CSS背景图片位置

Question

我在容器中有两个div，右边div有一个背景图像。 我想移动右侧div的背景图像，以便它的某些部分（例如20px）出现在左侧div中。 是否可以使用z-index等？ 我尝试将背景图像位置设置为-20px，但不可见。 请看看jsfiddle： http ： //jsfiddle.net/k8d6U/1/

Answer 1

背景图像仅出现在元素的边界内，因此如果右对齐的div与左对齐的div重叠所需的20个像素，则可以执行此操作。

或者，您可以将右侧div的背景图像设置为-20px就像您说的那样，然后将相同的背景图像应用于左侧div并将其放置在距离右侧20像素的位置。 这将产生您正在寻找的效果。

这是一个例子：

.left {
    float:left;
    width:200px;
    background: orange url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat 180px 50%;
}
.right {
    float:left; 
    width:200px;
    background: #ccc url("http://i42.tinypic.com/2vxfyc4.jpg") no-repeat -20px 50%;
}

在示例中，我还将图像本身（绝对定位）直接放置在背景图像下方，宽度相同（如果需要校样）。

Answer 2

我认为这就是你正在寻找的东西http://jsfiddle.net/k8d6U/8/ z-index仅适用于相对/绝对/固定位置的元素，右侧与左侧重叠，但实现这种方式的方式可能会因不同的分辨率而中断您可以简单地将20px的条形添加到左div的中心，然后将其余的添加到右div以伪造重叠