如何制作单个图像，视为三个不同的图像？

Question

我刚刚浏览了一个网站代码，我看到了社交网络链接的图片

当我看到网站时，我只看到图像的顶行。这意味着较暗的前三个图像。

问题是，当我的鼠标悬停在脸书图片上时，只有脸部图片变成了浅色的脸部图片，而其他两个链接也是如此。

他们使用的代码如下所示

<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/