将文本与html中的图像链接？答案

【问题标题】：Linking text with images in html?将文本与html中的图像链接？
【发布时间】：2012-01-14 01:17:30
【问题描述】：

我正在尝试为我的网站制作一个菜单栏，我已经为栏本身制作了一个图像，并且文本应该放在它上面......所有这些都存在于一个表格中。这就是我现在拥有的：

<tr>
    <td>
        <img src="images/index2_04.jpg" width="667" height="33" alt="">
        <div style="position:absolute; left:50%; top:22%;">
<h1><a href="/index.html">Home</a> <a href="/more.html">More </a><a href="/help.html">Help</a></h1>
<div>
</td>
</tr>

如您所见，我一直在尝试将图像和文本与百分比联系起来，但尽管相对于图像的距离应该保持不变，但在不同设备上进行测试时，文本会发生变化和移动。有没有更好的方法来做到这一点？还是我做错了什么？

提前致谢；）

【问题讨论】：

你应该有一个像这样的结束 div

Home 更多帮助
你可以为你的例子做一个 jsfiddle

标签： html css menubar

【解决方案1】：

您要做的是将图像设置为 DIV 上的背景。

你可以这样做：

<html>
<head>
<style type="text/css">
div.example
{
background-image:url('images/index2_04.jpg');
background-repeat:repeat-x;
}
</style>
</head>

<body>
<div class="example"><a href="/index.html">Home</a></div>
</body>

</html>

【讨论】：

Home 更多 帮助

Home 更多帮助