2011-12-02 1 views
0

div 요소에 대해 네 개의 모서리 인 네 개의 "하위 이미지"로 구성된 이미지 스프라이트를 사용하고 있습니다. 스프라이트는 40x40 픽셀입니다. 각 '하위 이미지'는 20x20 픽셀입니다. 각 구석의 "하위 이미지는 스프라이트의 반대쪽 구석에 있습니다 (예 : 왼쪽 위의 하위 이미지는 스프라이트의 오른쪽 하단에 있습니다).높이를 알 수없는 요소의 맨 아래에 이미지 스프라이트를 배치하는 방법

div 요소는 너비가 440 픽셀이고 높이가 100 %입니다. 상단 모서리가 내려 갔지만 하단 모서리를 얻는 방법은 무엇입니까? 새로운 스프라이트를 만들지 않고이 작업을 수행 할 수있는 방법이 있습니까? CSS 규칙.

background: -20px -20px no-repeat url(<path>), 420px -20px no-repeat url(<path>); 
+0

이 바로 CSS로 가능한 경우 나도 몰라. 자바 스크립트를 열어 요소의 높이를 얻고 그 값으로 스프라이트의 CSS를 조정해야 할 수도 있습니다. – Benjam

+0

그렇게한다면 브라우저 크기를 조절해야 할 것이라고 생각합니다. JS를 사용하는 대신 두 개의 스프라이트를 사용합니다. : –

+0

이 경우 JavaScript보다 확실히 좋은 방법 일 것입니다. 그런 다음 반대쪽 구석 이미지와 혼동하지 않아도되며, '최고'스프라이트와 '아래'스프라이트를 가질 수 있습니다 (여전히 반대편 가장자리 그래도). – Benjam

답변

2

absolute LY 위치 의사 요소에 background-images을 넣습니다.

죄송합니다

351,859,, 여기, 당신의 질문을 오해는 '스프라이트'와 같은 기술이다 :

Demo