Question

由于某种原因，我无法让它工作。

下面是我要使用的图标表： 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;}

Answer 1

您需要制作a元素display:block。

Answer 2

我在这里更新了你的jsfiddle：

http://jsfiddle.net/YXeuf/

您需要将display：block添加到锚标记，并添加用于悬停到li的类。我也将文本居中并添加到行高中以使文本垂直居中。

Answer 3

试试这个：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;}

Answer 4

为什么不尝试这个：

http://jsfiddle.net/ubguy/13/

我认为这是更好的方式。

Answer 5

对于css精灵技术的一般用法，我们强烈推荐A List Apart中的这两篇文章：

CSS Sprites: Image Slicing’s Kiss of Death

和第二部分使用精灵结合javascript（jquery）

CSS Sprites2 - It’s JavaScript Time

我知道还有很多其他人，但我认为这两个人真的值得一读。

在css中使用精灵表格中的图标

5 个答案: