我已经尝试了一切方法，用我当前的 HTML 代码在图像上显示一些文本，但没有成功。
无论我做什么，文本总是出现在整个页面的底部，而不是图像上。
我看过很多关于 SO 的帖子，但它们对我不起作用。
以下是我解决此问题并继续前进的众多尝试之一。
我做错了什么以及如何解决它？
这是我的 HTML 代码:
<body width="100%" bgcolor="#f4f8f1">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" style="margin: 0 auto;" width="600">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320 header-welcome" width="600">
<a href="#">
<img class="hide" style="display: block;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="some text" width="1200" height="1000" border="0" />
<p>This is always appearing on the bottom of the page!</p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>最佳答案
使用position:absolute和left:0 right:0也使用z-index来显示图像上方的文字
希望这有帮助!
<body width="100%" bgcolor="#f4f8f1">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" style="margin: 0 auto;" width="600">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320 header-welcome" width="600">
<img class="hide" style="position: absolute; top: 0; left: 0; z-index:-1;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="some text" width="1200" height="1000" border="0" />
<p>This is always appearing on the bottom of the page!</p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>关于html - 如何在 HTML 电子邮件代码中将文本放在图像上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57417422/