背景图像不显示在导航栏中的链接上

Question

我有一个房子的图像，我想在导航栏上显示为“主页”链接。我已经输入了一些CSS来实现它，但似乎没有用。谁能帮我显示图像？请参阅下面的图片和CSS代码以获取说明。

浅蓝色的盒子应该是白色的小房子。请参阅下面的CSS

html, body
{
padding:            0;
margin-right:       auto;
margin-left:        auto;
}

.navbar
{
height:             48px;
width:              100%;
background-color:   #294052;
text-align:         center;
vertical-align:     middle;
margin-bottom:      10px;
}

li
{
display:            inline;
position:           relative;
padding:            20px;
border-right:       inset 2px white;
font-size:          20px;
font-weight:        normal;
font-family:        sans-serif;
vertical-align:     middle;
padding-top:        31px;
padding-bottom:     14px;
}

a
{
text-decoration:    none;
color:              white;
}

li:hover 
{
text-decoration:    underline;
background-color:   #447294;
}

li.home
{
background-color:   #447294;
background-image:   url('home.png');
}

span
{
font-weight:        bold;
}

我尝试使用display:block修复程序，但它只是弄乱了导航栏的其余部分。

HTML代码......

<div class="navbar">
<ul>
    <a href="#"><li class="home"></li></a>
    <a href="#"><li>ABOUT</li></a>
    <a href="#"><li>CyMAL: MUSEUMS, ARCHIVES AND LIBRARIES</li></a>
    <a href="#"><li>CONTACT</li></a>
</ul>

</div>

Answer 1

要开始调试，我首先尝试使用绝对URL来确保可以加载图像。

li.home
{
background-color:   #447294;
background-image:   url('full_path_to_image/home.png');
}

此外，请提供HTML代码，最好在http://jsfiddle.net/（或任何其他类似服务）进行现成演示。这样你就可以更好地帮助你了。

编辑：添加HTML代码后，问题似乎确实是图片的路径。

以下是工作演示：http://jsfiddle.net/tBNSU/

Answer 2

li.home中的背景图片 ;但是li.home并不足以显示任何内容。背景图像就像背景颜色 - 它们不会改变内容的形状。

尝试添加一些内容：

<li class="home">home</li>

或者将bg图像的对齐方式更改为center center，以便更清楚地看到它。