调整大小

Question

我有3个背景框，可以在鼠标悬停时改变颜色。在他们的背景之上是现在的占位符图像。我正在使用vw作为背景，这样当调整窗口大小时，它们会改变大小以匹配。

我正在尝试将图像对齐到盒子的中心，并根据盒子调整大小。

这是我的JSFIDDLE

<div class="socialbox">
    <ul class="socialNavList">
        <li class="navlinkedin"><a href="#">linkedin</a></li>
        <li class="navtwitter"><a href="#">twitter</a></li>
        <li class="navfacebook"><a href="#">Facebook</a></li>
    </ul>
</div>

Answer 1

尝试添加图片作为背景来锚定标签，如下所示：

ul.socialNavList li.navfacebook a {
    background: #ccc url('http://lorempixel.com/output/nightlife-q-c-32-32-1.jpg') no-repeat;
    background-size: 85% 85%;        
}

这样你就有了响应背景。 这是一个FIDDLE来试试。

注意我只为第三项添加，以显示效果。