如何在没有 CSS 的情况下使用 HTML 在图像上叠加文本？

Question

我想在我客户的网站上有一个全宽的号召性用语横幅。 我的客户拥有的模板不支持 CSS，所以我正在使用老式 HTML 来构建页面。

我有一个 img src 的背景图像，我想覆盖其中的文本。 我需要一个有效的代码，因为我真的不精通。

我搜索了将覆盖文本添加到背景图像的解决方案，但大多数答案都包含 CSS。 这是我尝试过的代码。

<table>  
  <tr>
    <td></td>
    <td rowspan=4><img src="/uploads/image12345jpg"></td>
  </tr>  
  <tr>
    <center><td colspan=4>This is the overlay text</td></center>
  </tr>  
</table>
</center>

我很感激你的帮助和回答。

支持人员说我必须将它单独添加到 HTML 代码中......不确定它在哪里。

Answer 1

我想你可能正在寻找这样的东西： https : //jsfiddle.net/DIRTY_SMITH/vz04m3ph/2/

<TABLE border="0" cellpadding="0" cellspacing="0">
  <TR> 
    <TD width="221" height="300" background="https://placeimg.com/640/480/any" valign="bottom">
      <FONT size="+1" COLOR="red">This is the overlay text</FONT>
    </TD>
  </TR>
</TABLE>

编辑：

这个问题是问如何使用内联样式，我认为：

（我还在点击功能上放置了一些内联 javascript，因为您提到您的脚本也无法正常工作） https://jsfiddle.net/DIRTY_SMITH/vz04m3ph/28/

<td style="position:relative;">
  <img src="https://placeimg.com/640/480/any" style="position:absolute;z-index:1;" width="600px" height="150px" />
  <div style="z-index:2;position:relative;color:red;font-weight:bold; font-size: 40px; top: 40px; left: 100px;" onClick="(function(){
    alert('See You can click me');
    return false;
});">
    <a href="#" onClick="(function(){ alert('See You can click me'); return false; })();return false;">
    your text goes here click here</a>
  </div>
</td>

Answer 2

这对我有用。 感谢您的帮助！ 欣赏它。

<div class="container" style="position:relative;text-align:center;color:white;" >
  <img class="img-responsive" src="https://placeimg.com/640/480/any" alt="#" style="width:1880px;height:250px;" >
  <div class="centered" style="position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);" >Example Text</div>
</div>