在 html 中链接文本和图像？

发布于 2024-12-27 02:46:59 字数 565 浏览 9 评论 0原文

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

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

正如您所看到的，我一直在尝试用百分比链接图像和文本，但是尽管事实是相对于图像的距离应该保持相同，但在测试时文本会改变并移动不同的设备。有更好的方法吗？或者我做错了什么？

提前致谢 ;）

原文

I am trying to make a menu bar for my website, I've got an image for the bar itself and the text should go ontop of it... All of this lives inside a table. This is what I have right now:

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

As you can see I've been trying to link the image and text with percentages, but despite the fact that the distance should stay the same relative to the image, the text alters and moves when tested on different devices. Is there a better way of doing this? Or am I doing something wrong?

Thanks in advance ;)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星星的軌跡 2025-01-03 02:46:59

您想要做的是将图像设置为 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>

What you want to do is set the image as a background on the DIV.

You can do that like this:

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

回复收藏 0 原文

~没有更多了~