CSSの背景イメージの位置

Question

私はコンテナに2つのdivがあり、右側のdivには背景イメージがあります。右のdivの背景画像を移動して、左のdivにその一部（たとえば20ピクセル）が表示されるようにします。例えば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に追加してオーバーラップを偽造します