1

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

2 回答 2

2

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

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

另外，请提供 HTML 代码，最好在http://jsfiddle.net/（或任何其他类似服务）上制作一个现成的演示。这样我们就可以更好地帮助您。

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

这是一个工作演示：http: //jsfiddle.net/tBNSU/

于 2012-12-18T17:38:08.260 回答
1

您的背景图片出现在li.home; 但li.home不够宽，无法显示任何东西。背景图像就像背景颜色——它们不会改变内容的形状。

尝试添加一些内容：

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

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

于 2012-12-18T17:53:45.947 回答