Question

我已经完成了相当多的搜索并查看了其他Stack Overflow帖子，但没有什么可以作为解决方案。感谢所有帮助。

HTML：

<div class="nav-bar">
<nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT US</a></li>
        <li><a href="#">PUBLISHERS</a></li>
        <li><a href="#">ADVERTISERS</a></li>
    </ul>
</nav>
</div>

CSS：

body{
    margin: 0 auto !important;
   background:black;
    background-color:black;
}
.nav-bar{
    text-align:center;
    margin-top:40px;
    background-color:black;
    background:black;

}
.nav-bar nav ul li{
border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    display:inline-block;
    border:2px dashed #E06223;
    padding:3px;
    width:118px;
    height:28px;
background-image:url ('http://example.com/sof/images/b_home.png');
}

.nav-bar a{
        text-decoration:none;
    color:white;
}

JSfiddle

Answer 1

只需删除url

之后的额外空格即可

background-image: url('http://example.com/sof/images/b_home.png');

演示 http://jsfiddle.net/tDCWR/3/

参考和更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

Answer 2

url与background-image属性的来源之间不需要空格：

background-image:url('http://example.com/sof/images/b_home.png');

<强> Updated Fiddle

Answer 3

从值中删除Extra空格。在那之前它会给你以下错误

无效的属性值。

这意味着该属性的值不是有效的。因此，您需要更改并使其有效。这是一种使其有效的方法。

删除空格，就像

background-image: url('http://example.com/sof/images/b_home.png');

现在，它不会显示错误。

无法在<li> </li>上将图片设置为背景

3 个答案: