html - 在图像上放置链接

Question

我正在尝试创建一个导航栏。背景由图像组成，在对链接进行排序之前，我一直在使用文本占位符。我似乎无法让文本出现在导航栏上，而是他们坚持以列表样式出现在下方。

一个例子: 灰色渐变条旨在用作导航栏。

HTML:

<div id="pagewrapper">
<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center">
        <div id="pagebanner">
        <img src="img/banner.png" />
        </div>

        <div id="navibar">
        <img src="img/navibar.png">
        <div class="naviitems">
        Home
        </div>
        <div class="naviitems">
        PHolder1
        </div>
        <div class="naviitems">
        PHolder2
        </div>
        <div class="naviitems">
        PHolder3
        </div>
        <div class="naviitems">
        Contact Us
        </div>
        </img>
        </div>

        <div id="pagecontent">
        <h1>Oh no, I broke my elephant!</h1>
        <p>Wiggle!</p>
        </div>

    </div>
</div>

以及对应的CSS:

#container{
    margin: 0 auto;
    width:1017px;
    text-align:center;
}
#left{
    float:left;
    width:160px;
    height:900px;
    background-color: #D8D8D8;
}
#right{
    float:right;
    width:160px;
    height:900px;
    background-color: #D8D8D8;
}
#center{
    display: inline-block;
    margin:0 auto;
    width: 697px;

}
#pagebanner{
display: inline-block;
    margin:0 auto;
    width: 697px;
}
#navibar{
display: inline-block;
    margin:0 auto;
    width: 697px;
    height: 27px;
}
.naviitems{
margin: 0 auto;
height:25px;
width:20%;
}
#pagecontent{
display: inline-block;
    margin:0 auto;
    width: 697px;
}

Answer 1

您需要将父 DIV 的背景属性设置为图像，而不是使用 IMG 标签调用它。

.navibar {
background:url(URLofImage)
}