如何制作单个图像，被视为三个不同的图像？ [英] How to make a single image, treated as three different images?

问题描述

我刚刚浏览网站程式码，看到社交网路连结的图片

I was just going through a website code, and I saw an image for Social Networks link

当我看到网站时，我只看到图片的顶行。这意味着更深的顶部三个图像。

When I see the website, I only see the top row of the images. It means the darker top three images.

问题是当我的鼠标悬停在Facebook图片上时，只有Facebook图片成为轻微的Facebook图片，而其他两个链接也是如此。

The issue is when my mouse hovers over the facebook image, only facebook image becomes the light facebook image, and same happens for the other two links as well.

他们使用的代码如下：

<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

Thank you Zeeshan

推荐答案

@ Zeeshan;它被称为 sprite

查看本文了解更多 http://css-tricks.com/158-css-sprites/

@ Zeeshan; it's called sprite
check this article for more http://css-tricks.com/158-css-sprites/

请检查此示例 http://jsfiddle.net/sandeep/F4wpW/

这篇关于如何制作单个图像，被视为三个不同的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！