CSS background image position

Question

У меня есть два divs в контейнере, правый div имеет фоновое изображение. Я хочу переместить фоновое изображение правого div, чтобы часть (например, 20px) из него появилась в левом div. Можно ли, например, использовать z-index и т. Д.? Я попытался установить положение фонового изображения на -20px, но его не видно. Пожалуйста, обратите внимание на jsfiddle: http://jsfiddle.net/k8d6U/1/

Answer 1

фоновое изображение будет появляться только в пределах элемента, так что вы можете сделать это, если выравнивание по правому краю ДИВ перекрывает левую выровнен 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-индекс работает только для относительных/абсолютных/неподвижных элементов, расположенных правый перекрывает левую, но так, как это достигается может сломаться на разных resolutions.You могли бы просто принять, что Полоса 20px добавьте его вправо справа на левом div и добавьте остальное на правый div, чтобы подделать перекрытие