如何制作一张单张图片，视为三张不同的图片？

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/