스프라이트가 표시되지 않음

Question

스프라이트 롤오버 이미지가 표시되지 않습니다.

목표는 CSS에 의해 제어되는 롤오버가있는 아이콘의 행을 갖는 것입니다.

현재 아래 코드는 이미지를 표시하지 않습니다. 무엇이 누락 되었습니까?

CSS :

#social { 
    margin: 0; 
    padding: 0; 
    height: 15px; 
} 
#social li { 
    margin: 0 5px 0 0; 
    padding: 0; 
    list-style-type: none; 
    display: inline; 
    height: 15px; 
    float: left; 
} 
#social li.last{ 
    margin-right:0px; 
} 
#social li a { 
    background-image: url("../images/icon_twitter.png") 0px 0px; 
    background-repeat: no-repeat; 
    display: block; 
    height: 15px; 
    width: 18px; 
} 
#social li#social-twitter a{ 
    background-position: 0px 0px; 
} 
#social li#social-twitter a:hover { 
    background-position: 0px -15px; 
} 
#social li#social-youtube a{ 
    background-position: -18 top; 
} 
#social li#social-youtube a:hover { 
    background-position: -18 -15px; 
} 
#social span { 
    display: none; 
} 

HTML : 당신은 background-image 내 배경 위치를 설정하려고

<ul id="social"> 
<li id="social-twitter"><a href="#"><span>Twitter</span></a></li> 
<li id="social-youtube" class="last"><a href="#"><span>Youtube</span></a></li> 
</ul> 

Answer 1

.

background-image: url("../images/icon_twitter.png") 0px 0px; 

이 사람 :이

변경

background-image: url("../images/icon_twitter.png"); 
background-position: 0px 0px; 

Answer 2

문제 : 당신은

솔루션 background-position 재산 background-image로 사용 : 하나는 background 재산 또는 사용을 사용 background-position 별도로

background: color url(src) repeat position; 

또는

는

background-image: url(src); 
background-position: position; 

코드는 다음처럼한다 :

background: url("../images/icon_twitter.png") 0 0 no-repeat; 

참고 : 당신은 비 제로 숫자와 0으로 px (또는 다른 장치)를 사용한다해야 장치없이 사용하십시오.