CSS의 아이콘에 스프라이트 시트 사용

어떤 이유로이 기능을 사용하는 데 문제가 있습니다. enter image description here CSS의 아이콘에 스프라이트 시트 사용

내 문제는 내가 폭과 <li> 항목과 <a> 항목 모두의 높이를 설정하려고했습니다 비록 내가 25x25px 아이콘을 볼 수 없다는 것입니다 :

는 Heres는 아이콘 시트는 내가 사용하려는 , 나는 그 배경의 대부분을 <a> 안에있는 텍스트로 볼 수 있습니다 (물론 없애 버릴 것입니다!)

내가 뭘 잘못하고 있는지 말해 줄래? 고맙습니다!

Here's a jsfiddle 내 코드와 문제점을 보여줍니다.

아니면 아래에있는 내 코드를 볼 수 있습니다 :

HTML :

<div id="connect"> 
       <h4>Stay Connected</h4> 

        <ul class="icons"> 
        <li><a class="blogger" href="#blogger">a</a></li> 
        <li><a class="linkdin" href="#linkd">b</a></li> 
        <li><a class="facebook" href="#facebook">c</a></li> 
        <li><a class="twitter" href="#twit">d</a></li> 
        </ul> 
      </div>

CSS :

#connect ul.icons{list-style: none;} 
     #connect ul.icons li{ 
      width: 25px; 
      height: 25px; 
     } 
     #connect ul.icons li a { 
      width: 25px; 
      height: 25px; 
      background-color: red; 
      background-image: url('../IMG/iconset.gif'); 
     } 
      #connect li a.blogger{background-position:100px 0px; } 
      #connect li a:hover.blogger{background-position:100px 25px;} 
      #connect li a.linkdin{background-position:50px 0px;} 
      #connect li a:hover.linkdin{background-position:50px 25px;} 
      #connect li a.facebook{background-position:25px 0px;} 
      #connect li a:hover.facebook{background-position:25px 25px;} 
      #connect li a.twitter{background-position:75px 0px;} 
      #connect li a:hover.twitter{background-position:75px 25px;}

출처

2012-08-29 Holly

이 시도 :

http://jsfiddle.net/hunter/ubguy/14/ 내가 만든 당신의 li a 스타일 display: block;

이 또한하지

#connect li a.blogger:hover

전에, 수업 후 :hover 스타일을 지정 또한의 텍스트를 숨길 text-index: -9999px을 사용할 수 있습니다 화면

#connect ul.icons li a { 
    text-indent: -9999px; 
    background-image: url('http://c3it.webuda.com/IMG/iconset.gif'); 
    width: 25px; 
    height: 25px; 
    display: block; 
} 

#connect li a.blogger{background-position:25px 0px; } 
#connect li a.blogger:hover{background-position:25px 25px;} 

#connect li a.linkdin{background-position:75px 0px;} 
#connect li a.linkdin:hover{background-position:75px 25px;} 

#connect li a.facebook{background-position:100px 0px;} 
#connect li a.facebook:hover{background-position:100px 25px;} 

#connect li a.twitter{background-position:50px 0px;} 
#connect li a.twitter:hover{background-position:50px 25px;}

출처

2012-08-29 12:39:58 hunter