0

我想制作一个导航栏，每个项目都有自己的图像，上面写着项目的名称。所以应该连续有几张图片，每张图片上都有一些文字。这是我得到的图像行：

<div class="navigation" align="center">
<a href="link1"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link2"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link3"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link4"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link5"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
    <a href="link6"><img src="images/bn_blue.png" width="120" height="70" alt="" /></a>
</div>
4

2 回答 2

3 
<div class="navigation" align="center">
<ul><li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a></li>
<li><a href="link2"><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></a><li>
</ul>
</div> 
<style>
li
{
display:inline-block;
}
</style>
于 2013-10-07T21:05:05.050 回答
1

给每个 a href 一个类，即 .home_bg 等。然后在 css 中添加一个

.home_bg {
background-image: url(/example/example.png)
}

如果它们不同，请对每个图像执行此操作。然后在 html 中删除 img 标签

于 2013-10-07T19:58:09.550 回答