목록 항목의 스프라이트

Question

좋은 하루 간단한 목록으로 소셜 미디어 아이콘의 스프라이트를 사용하려고합니다. 여기 내가 기대하는 것입니다 :

나는 아래에 언급 된 코드를 시도했지만 불행하게도, 그것은 아무것도 표시되지 않습니다. 누군가 적절한 방법으로 사용하는 방법을 알려 줄 수 있습니까?

.sprite { 
 
    background-image: url(img/spr.png); 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 
.soc1 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 0; 
 
} 
 

 
.soc2 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 -37px; 
 
} 
 

 
.soc3 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 -74px; 
 
}

<ul class="secondlist"> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc1" title="Facebook"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc2" title="AskMe"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc3" title="Twitter"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc4" title="MySpace"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc5" title="Feed"></a> 
 
    </li> 
 
</ul>

Answer 1

는 의견에서 언급 한 바와 같이 :

당신은 그래서 예를 들어, 사용하는 클래스와 스프라이트를로드해야합니다

class="sprite soc1" 

변경 CSS에 :

.sprite { 
    background-image: url(img/spr.png); 
    background-repeat: no-repeat; 
    display: block; 
    width: 37px; 
    height: 37px; 
} 
.soc1 { 
    background-position: 0 0; 
} 

.soc2 { 
    background-position: 0 -37px; 
} 

.soc3 { 
    background-position: 0 -74px; 
} 

당신은 단지 예를 들어, 사용하고 soc1을 사용하여 스프라이트 위치를 설정하십시오.