Question

我想制作一个导航栏，每个项目都有自己的图像，并在其上面写上项目的名称。因此，连续应该有一些图像，每个图像上都写有一些文字。这是我得到的一排图像：

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

Answer 1

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

Answer 2

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

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

如果每张图片不同，请为此执行此操作。然后在html中删除img标签

在图像顶部的文本

2 个答案: