我使用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;
}
这是结果:
答案 0 :(得分:1)
将ID放在li
标签而不是锚点上。目前,li
标记会收到部分必要的样式,例如width
,background-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>