html - 将文本与html中的图像链接起来?

标签 html css menubar

我正在尝试为我的网站制作一个菜单栏,我有一个栏本身的图像,文本应该放在它上面......所有这些都在一个表格中。这是我现在拥有的:

<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 上的背景。

你可以这样做:

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

关于html - 将文本与html中的图像链接起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8859337/

相关文章:

HTML/CSS 图像出现在错误的区域?

java - Vaadin - 响应列

javascript - 任何没有 MVC 或类似东西的 ASP.NET 脚本/样式表压缩器?

python - 菜单和工具栏

html - Bootstrap 4 : position <div> in a responsive way next to centered image

javascript - 执行此操作的更有效的编程方法是什么

delphi - 如何防止菜单和工具栏点击窃取 float 表单的焦点?

html - 固定菜单左对齐

html - 我可以在与其 DD 相同的行上渲染 DT 吗?

css - 如何覆盖GWT默认样式clean.css?