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像素處。這會產生你正在尋找的效果。

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重疊