html - 如何在类中使用 css 属性背景拉伸(stretch)或适合背景图像

Question

如何在类中使用 css 属性 background 拉伸(stretch)或适应背景图像。我在 li 中使用一个图标并希望适合特定的宽度。但它不渲染。

HTML 代码。

<ul>
   <li class="social-bg-facebook">F</li>
   <li class="social-bg-twitter">T</li>
   <li class="social-bg-user">U</li>
   <li>UN</li>
</ul>

我正在使用这些类来适应 li

中的背景

CSS 代码。

.icon-list li {
    margin:0px;
    padding:0px;
    position: relative;
    top: -36px;
    left: 5px;

}
.icon-list li.social-bg-facebook {
    background:url(images/facebook.png) no-repeat;
    width:35px;
}
.icon-list li.social-bg-twitter {
    background:url(images/twitter-icon.png) no-repeat;
    width:35px;
}

Answer 1

您可以使用 background-size :

.icon-list li.social-bg-facebook {
    background:url(images/facebook.png) no-repeat;
    background-size: 100% 100%;
    width:35px;
}