CSS - 배경 설정 방법 : 호버 효과를 위해 아래에 2 개의 이미지 위치를 지정 하시겠습니까?

Question

하나의 이미지가 두 개 있습니다. 너비는 16px이고 높이는 24px입니다 (따라서 각 이미지는 16x12 픽셀입니다). 내가 먼저 상단 이미지를 표시하고 싶습니다 - 나는 이런 식으로 일을 오전 :

background: url('image.png') left 0px top 12px no-repeat; 

이 잘 작동합니다. 하지만 이제 메뉴 항목을 가리키면 상단 이미지를 숨기고 그 대신 디스플레이 아래에 하나를 숨기고 싶습니다. 이것이 설정 방법을 모르겠습니다. 나는 시도했다 :

background: url('image.png') left 0px top 0px bottom 12px no-repeat; 

또는

background: url('image.png') left 0px bottom 12px no-repeat; 

그러나 어떤 성공없이

.

모든 조언을 주시면 감사하겠습니다.

0 0은 왼쪽입니다 다음과 같이 감사

Answer 1

.menuclass:hover { 
    background: url('image.png') 0px -12px no-repeat; 
} 

내가 일반적으로 스프라이트의

.menuClass:hover { 
    background: url('image.png'); 
    background-position: 0 -12px; 
    bacakground-repeat: no-repeat; 
} 

좌표로 입력이 더 명확하게하는 것이 있습니다.

-16px 0은 그냥 바로

0 -24px 바닥이 두 번째 (아래) 이미지를 얻을 그래서

왼쪽입니다

-16px -24px 바닥입니다 오른쪽 상단입니다 0 -16px

0은 스프라이트의 맨 왼쪽에 있습니다. 그리고 나서 -16 픽셀은 처음부터 16 픽셀에서 시작하고 싶다고 말합니다.

Answer 2

호버 버튼을 이와 같이 잘 작동 시키려면 요소의 크기를 지정하여 만 background-position으로 대체하여 배경 매핑을 오프셋합니다. X 오프셋과 Y 오프셋이라는 두 개의 매개 변수가 필요합니다.

.menuClass:hover { 
    background-position:0 -24px; 
} 

Sample provided here :까지 배경 밀어 당신은 Y 값 을 상쇄 할 필요가 부정적으로이 '위'이미지를 넣어.