CSS의 배경 위치가

Question

나는이 이미지와 CSS 스프라이트를 만들고 싶어 좌표

내 HTML 코드

;

<div class="top"></div> 
<div class="bottom"></div> 
<div class="right"></div> 
<div class="left"></div> 

그리고 CSS 코드;

.left{ 
background : url(arrw.png) no-repeat 0 0; 
width:12px; 
height:19px; 
} 

.right{ 
background : url(arrw.png) no-repeat -29px 0; 
width:12px; 
height:19px; 
} 

.top{ 
background : url(arrw.png) no-repeat -12px 0; 
width:16px; 
height:12px; 
} 

.bottom{ 
background : url(arrw.png) no-repeat -12px -12px; 
width:16px; 
height:12px; 
} 

완벽하게 작동하지만 왜 배경 위치에 음수 값을 부여하는지 이해할 수 없습니다. 좌표 시스템이 아니며, 우리가 필요하지 않으면 이것에 긍정적 인 가치를 부여합니까? 위치 값은 0 0 (왼쪽 위)부터 시작하고 양수 값을 가져야합니까? 그렇지 않습니다. 무엇이 잘못 되었습니까?

Answer 1

사용중인 스프라이트 이미지는 일반적으로 사용자가 표시하는 상자보다 큽니다. 이미지를 포함하는 경우 왼쪽 상단에 배치됩니다. 이제 이미지의 일부가 상자 오른쪽으로 넘치도록 표시하려면 이미지를 왼쪽으로 이동해야합니다. 그러나 이미지가 기본값으로 이미 left: 0;에 있으므로 음수 값을 설정해야 더 멀리 왼쪽으로 이동할 수 있습니다.

두 장의 종이를 생각해보십시오. 하나는 구멍이 있고 다른 하나는 첫 번째 종이 뒤에서 움직입니다. 뒤쪽 시트의 일부가 오른쪽 하단에 표시되도록하려면 왼쪽 상단으로 이동해야합니다. 따라서 구멍을 통해 보거나 상자에 이미지를 표시 할 때 뒤쪽 시트를 이동하려는 방향으로 위치 방향이 바뀝니다.

Answer 2

좋아요, 0의 위치를 ​​가진 배경 이미지로 div를 가져옵니다. 0에 추가하면 오른쪽 아래로 이동합니다. 빼면 왼쪽 위로 이동합니다. 0 0은 해당 시스템의 기본입니다. 그것이 당신을 귀찮게하는 경우

, 당신은이에 코드를 변경할 수 있습니다 :

.left{ 
background : url(arrw.png) no-repeat top left; 
width:12px; 
height:19px; 
} 

.right{ 
background : url(arrw.png) no-repeat top right; 
width:12px; 
height:19px; 
} 

.top{ 
background : url(arrw.png) no-repeat top center; 
width:16px; 
height:12px; 
} 

.bottom{ 
background : url(arrw.png) no-repeat bottom center; 
width:16px; 
height:12px; 
}