在图像上放置链接

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)
}

Answer 2

我用过

background: linear-gradient(180deg, #777, #eee);

而不是背景图片，看看它是否符合您的需求...... jsfiddle