인프런 커뮤니티 질문&답변
작성한 질문수
background-position 속성 질문드립니다
작성
·
470
답변 2
0
js Lee
질문자
즉, 선생님의 예시에서, background-position: -300px -300px은, 버튼의 왼쪽 모서리가
이미지의 (300, 300) 지점에 위치하게 되지만,
background-position: 60% 60%는 이미지 자체가 오른쪽으로 300px, 아랫쪽으로 300px만큼 날아가기 때문에
버튼에 아무것도 보이지 않게 된다는 것인지요?
0
Dongho Lee
지식공유자
이 부분이 처음에는 까다로울 수 있지만 몇 번 접해보면 쉽습니다.
우선 100x100 크기의 버튼이 있다고 합시다. 그 배경 이미지의 크기는 500x500 이라고 하지요.
그런데 이 버튼의 배경이미지는 버튼의 좌측(left) 위쪽(top) 부분이 기준이라 버튼의 100x100 크기 바깥쪽은 안보이게 됩니다.
이미지의 좌표에서 300x300 부분의 위치에 있는 100x100 크기의 이미지가 버튼에 보여야 한다면
background-position: -300px -300px 을 지정해서 이미지가 왼쪽,위쪽으로 300픽셀 만큼 이동하면 버튼에 그림이 보이게 됩니다.
글로 설명드리니 좀 어렵네요. 이해가 어려우시면 다시한번 질문 주시기 바랍니다. 시간날 때 영상으로 설명드리겠습니다.