背景图像未显示在导航栏中的链接上答案

【问题标题】：Background image not displaying on a link in navbar背景图像未显示在导航栏中的链接上
【发布时间】：2012-12-18 17:32:53
【问题描述】：

我有一张房子的图片，我想在导航栏上显示为“家”链接。我已经输入了一些 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>

【问题讨论】：

标记在哪里？尝试使用双引号 url("home.png"); - 假设文件 home.png 与 css 文件位于同一位置/文件夹。
更新后，文件“home.png”是否与您的 css 文件所在的位置/文件夹/目录相同？
啊，是的，谢谢 Jawad。我引用的是 .html 文件所在的 URL，而不是 .css。一个我不应该再犯的菜鸟错误！
没问题。我们都去过那里。只是没有 T 恤！

标签： html css web-applications

【解决方案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/

【讨论】：

试过这个并没有解决问题。 :/ 将立即使用 HTML 代码编辑我的原始问题

【解决方案2】：

您的背景图片存在在li.home；但是li.home 的宽度不足以显示任何内容。背景图像就像背景颜色 - 它们不会改变内容的形状。

尝试添加一些内容：

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

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

【讨论】：