如何在沒有 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>