如何製作一張單張圖片，視爲三張不同的圖片？

Question

我正要通過一個網站的代碼，我看到的圖像用於社交網絡的鏈接

當我看到的網站，我只能看到圖像的頂行。這意味着三個較暗的圖像。

問題是，當我的鼠標懸停在facebook圖片上時，只有facebook圖片變成了輕微的臉書圖片，而其他兩個鏈接也是如此。

他們已經使用的代碼如下

<ul class="social-icons"> 
<li class="facebook"> 
    <a title="Facebook" href="http://facebook.com/eclyptix">Facebook</a> 
</li> 
<li class="twitter"> 
    <a title="Twitter" href="http://twitter.com/eclyptix">Twitter</a> 
</li> 
<li class="linkedin"> 
    <a title="LinkedIn" href="http://linkedin.com/company/eclyptix">LinkedIn</a> 
</li> 

給出如何做到這一點。

您的幫助表示讚賞。

謝謝 Zeeshan

Answer 1

@ Zeeshan;這就是所謂的sprite
檢查本文的詳細http://css-tricks.com/158-css-sprites/

檢查這個例子http://jsfiddle.net/sandeep/F4wpW/

Answer 2

這是CSS Sprite。請參閱文章以實現目標。

Answer 3

您可以通過在css文件中設置寬度/高度來設置背景圖像的位置並對其進行裁剪。

// HTML

<ul class="social-icons"> 
    <li class="facebook"> 
     <a title="Facebook" href="http://facebook.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li> 
    <li class="twitter"> 
     <a title="Twitter" href="http://twitter.com/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li> 
    <li class="linkedin"> 
     <a title="LinkedIn" href="http://linkedin.com/company/eclyptix"><img src="http://www.killersites.com/killerSites/resources/dot_clear.gif" width="30px"></a> 
    </li> </ul> 

// CSS

.facebook{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px 0px no-repeat; 
    width:30px; 
    height:30px; 
} 
.facebook:hover{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) 0px -30px no-repeat; 
} 

.twitter{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px 0px no-repeat; 
    width:30px; 
    height:30px; 
} 
.twitter:hover{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) -30px -30px no-repeat; 
} 

.linkedin{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px 0px no-repeat; 
    width:30px; 
    height:30px; 
} 
.linkedin:hover{ 
    background:url(http://i.stack.imgur.com/LNPd7.png) -60px -30px no-repeat; 
} 

這裏是工作示例http://jsfiddle.net/kayadiker/uuKzQ/