CSS 배경 이미지 위치

Question

컨테이너에 두 개의 div가 있습니다. 오른쪽 div에는 배경 이미지가 있습니다. 오른쪽 div의 배경 이미지를 이동하여 왼쪽 div에 일부 (예 : 20 픽셀)가 나타나게하고 싶습니다. 예를 들어 Z- 색인 등을 사용하는 것이 가능합니까? 나는 배경 이미지 위치를 -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- 색인은 상대/절대/고정 위치 요소에서만 작동합니다. 오른쪽이 왼쪽으로 겹치지 만 달성되는 방식이 다른 해상도에서 깨질 수 있습니다. 20px 스트립을 왼쪽 div에 오른쪽 가운데에 추가하고 오른쪽 div에 나머지를 추가하여 겹침을 가짜로 만듭니다.