我在使用 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;
}
结果如下:
最佳答案
将 ids 放在 li
标签上而不是 anchor 上。目前,li
标签接收部分必要的样式,例如 width
、background-image
等...而 anchor 标签接收其他样式整 block 造型,背景定位。所有这些样式都应应用于 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>
关于html - 背景位置不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14802920/