Question

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

Answer 1

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

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

Here就是一个例子：

.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伪造重叠

CSS背景图片位置

2 个答案: