在css中使用sprite工具圖標

我在遇到問題時出於某種原因無法工作。在css中使用sprite工具圖標

繼承人的圖標片我想使用： enter image description here

我的問題是，即使我已經嘗試設置寬度和兩個<li>項目和<a>項目的高度我看不出25x25px圖標，我只能看到<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;

課後還要指定:hover的造型，而不是之前

#connect li a.blogger: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