html - 为什么我的背景图片不显示？

Question

我不明白为什么当我使用 background-image 属性时我的背景图片没有显示。如果我尝试在 list-style-image 属性中使用它，它也不会显示。如果我在 img 元素中使用它，它将会显示，但我不想那样做。我不明白为什么它没有出现。

这是我的 HTML:

<ul class="contact">
    <li id="phone"><a href="tel:1234567890">(123) 456-7890</a></li>
    <li id="email"><a href="mailto:example@email.com" target="_blank">example@email.com</a></li>
    <li id="facebook"><a href="#" target="_blank">Facebook</a></li>
</ul>

这是我的 CSS:

ul.contact {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 35px;
}

.contact li {
    background-image: url('img/phone.png');
    background-size: 2%;
    background-repeat: no-repeat;
    background-position: left;
}

Answer 1

我很确定你的 URL 是错误的，我复制了你的代码，只是放置了一个我在 imgur 上找到的随机图片 url，它起作用了

background-image: url('http://i.imgur.com/oSNkApR.jpg');

试试这个，告诉我们它是否有效

background-image: url('/img/phone.png');

或者，如果您使用的是 ASP，也许可以试试这个

background-image: url('../ContentFolder/img/phone.png');

让我们知道您的进展情况。