Как наложить текст на изображение, используя HTML без CSS?

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

Это сработало для меня. Спасибо вам за помощь! Цени это.

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

Answer 2

Я думаю, что вы можете искать что-то вроде этого: 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 в функцию click, потому что вы упомянули, что ваши скрипты тоже не работают) 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>