CSS背景图片位置答案

【问题标题】：CSS background image positionCSS背景图片位置
【发布时间】：2011-12-31 05:57:52
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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%;
}

在示例中，我还将图像本身（绝对定位）直接放置在背景图像下方，并且宽度相同（以防您需要证明）。

【讨论】：

【解决方案2】：

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

【讨论】：