使用背景图象的社会象

时间:2014-08-14 17:21:36

标签: css position background-image social

暂时坚持这一段。

我似乎无法将社交图标图像显示在此页面的页脚上。我尝试了几件事无济于事。

首先,我认为我有背景:url()声明错误。

这就是我所拥有的。

<div class="footer">
    <ul class="links">
        <li class="fb">Facebook</li>
        <li class="tw">Twitter</li>
    </ul>
</div>

和css

.footer {
    background-color: #222;
    width: 100%;
    padding: 20px;
} 

.links {
    text-align: right;
}

.links ul {
    display: block;
    text-align: right;
}

.links li {
    display: inline-block;
    color: white;
    padding-right: 70px;
}

.fb {
    background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/facebookr-48.png)no repeat;
    background-position: center;
   }

  .tw   {  background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/twitter-48.png)no repeat;
background-position: center;

}

我知道位置中心不正确,但我只是想让图标显示在那里作为首发,然后在我看到图标后调整位置......

这是一个小提琴http://jsfiddle.net/Lucky500/g2kuLb70/1/

1 个答案:

答案 0 :(得分:2)

你在背景的无重复部分错过了一个连字符:

background: url(http://www.lucianooliveira.net/wp-content/uploads/2014/08/twitter-48.png) no-repeat;

<强> jsFiddle example