背景位置不起作用

时间:2013-02-10 21:43:32

标签: html css css3 background background-position

我使用background-position有一个奇怪的问题..简单地说它不起作用了!

这是我的代码:

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li><a href="#" id="facebook-img"></a></li>
        <li><a href="#" id="twitter-img"></a></li>
        <li><a href="#" id="googlplus-img"></a></li>
        <li><a href="#" id="linkedin-img"></a></li>
        <li><a href="#" id="youtube-img"></a></li>
        <li><a href="#" id="rss-img"></a></li>
    </ul>
</div>

#follow-wrapper ul li {
    display: inline-block;    
    margin-left:8px;    
    width: 16px;
    height: 16px;
    background-image: url('../img/follow.png');
    background-repeat: no-repeat;
}

#facebook-img{
    background-position: 0px 0px;
}

#twitter-img {
    background-position: 0px -26px;
}

#googleplus-img{
    background-position: 0px -52px;
}

#linkedin-img{
    background-position: 0px -78px;
}

#youtube-img{
    background-position: 0px -104px;
}

#rss-img{
    background-position: 0px -130px;
}

这是结果: enter image description here

2 个答案:

答案 0 :(得分:1)

将ID放在li标签而不是锚点上。目前,li标记会收到部分必要的样式,例如widthbackground-image等...当锚标记接收样式的另一部分时,背景定位。所有这些样式都应该应用于li

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li id="facebook-img"><a href="#" ></a></li>
        <li id="twitter-img"><a href="#" ></a></li>
        <li id="googlplus-img"><a href="#"></a></li>
        <li id="linkedin-img"><a href="#"></a></li>
        <li id="youtube-img"><a href="#"></a></li>
        <li id="rss-img"><a href="#"></a></li>
    </ul>
</div>

答案 1 :(得分:0)

<a>个链接没有背景信息。您需要将ID移动到<li>元素。您目前尚未使用CSS定位正确的元素。

<div id="follow-wrapper">
    <p>Follow Us</p>
    <ul>
        <li id="facebook-img"><a href="#"></a></li>
        <li id="twitter-img"><a href="#"></a></li>
        <li id="googlplus-img"><a href="#"></a></li>
        <li id="linkedin-img"><a href="#"></a></li>
        <li id="youtube-img"><a href="#"></a></li>
        <li id="rss-img"><a href="#"></a></li>
    </ul>
</div>