图像顶部的文本答案

【问题标题】：Text on top of an image图像顶部的文本
【发布时间】：2013-10-14 12:25:24
【问题描述】：

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

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

【问题讨论】：

这可能不是尝试使用图像作为锚链接的background-images 的最佳方式。

标签： html css image text overlay

【解决方案1】：

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

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

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

【讨论】：

但是这里每个菜单按钮都有一个 div 容器，然后它们就不再相邻了
不要在每个周围添加 Div 见下文
使用 ul 将每个链接容纳在一个 li 中，然后将上面的类添加到每个 li。确保 ul 有一个 css 规则来列出样式：无；对于 ul li 显示：inline；应该能找到

【解决方案2】：

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

【讨论】：