호버트 이미지는 스프라이트를 만들려고 할 때 호버 이미지가없는 원본 이미지 만 표시합니다. 어떤 아이디어?

Question

userbar.php 파일에 지정한 코드를 복사하여 붙여 넣으려고했습니다. 나는 CSS를 위와 동일하게 유지했습니다. 포토샵으로 파일을 저장했는데 "웹용으로 저장 -> gif 64 no dither"라는 파일을 저장하고 파일의 두 이미지 사이에 작은 공간을 유지했습니다. 그런 다음 업로드하여 파일을 참조했습니다. 그러나 어떤 이유로 그것은 호버없이 정상적인 이미지 만 보여줍니다. 내가 뭘 잘못했는지 생각해? PHP의 코드 :

.myButton { 
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif); 
display: block; 
height: 22px; 
width: 22px; 
} 
.myButton:hover { 
background-position: x y; 
} 

원래 스레드 : 스프라이트가 다른, background-position-y 수평 인 경우 How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?

Answer 1

.myButton:hover { 
    background-position-x: -22px; 
} 

을보십시오.

스프라이트를 더 잘 이해하려면 this article about spites on nettuts+을 참조하십시오.

Answer 2

.myButton:hover { 
    background-position: 5px 5px; 
} 

Answer 3

하나 개의 솔루션은 값으로하거나 위의 코드 조각에 대한 자리로 x y를 사용하는 경우는 분명하지 않다으로, see.gif에있는 스프라이트의 실제 위치 값을 지정할 수 있습니다.

자리 표시자가 아니라면 문제가 있습니다. x를 실제 x 위치로 변경하고 y를 y 위치로 변경하면됩니다.