如何在没有 CSS 的情况下使用 HTML 覆盖图像上的文本？答案

【问题标题】：How to Overlay Text on Image Using HTML with no CSS?如何在没有 CSS 的情况下使用 HTML 覆盖图像上的文本？
【发布时间】：2019-06-21 16:19:00
【问题描述】：

我想在我客户的网站上放置一个全角号召性用语横幅。我的客户的模板不支持 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 代码中单独添加它...不确定它的去向。

【问题讨论】：

有人可以向我解释一下如何拥有一个不能使用 CSS 的 .html 页面吗？另外，模板应该不能不允许css，也许是框架？我错过了什么吗？
看到那个页面会很有趣，因为我不明白为什么您的客户页面不支持 CSS。
@AdamBuchananSmithI 我已经尝试了 CSS 代码和脚本，但它不起作用。我问支持为什么这种情况一直发生，然后他们告诉我我们拥有的模板不支持 CSS——这也让我感到困惑。所以我一直在构建仅使用 HTML 的页面...
@d00dlesnitch 那么我认为您唯一能做的就是将图像切碎并放在桌子上，让它们看起来像一页？
这是一个 x-y 问题吗？

标签： html content-management-system

【解决方案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>

编辑：

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

（我还在 click 函数上放置了一些内联 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>

【讨论】：

不幸的是，没有 :( 我很欣赏你的小提琴 :) 我正在研究这样的事情：google.com/…：我想我必须将 CSS 标记单独应用于 HTML 标记。跨度>
@d00dlesnitch 你说你不能在你的OP中使用css。
我很抱歉造成混乱，我也是编码新手。这就像把 CSS css 变成 html。这是我在寻找要使用的按钮但 CSS 不起作用时所做的事情。 <div class="button" style="background-color: #f56b00"><a style="color:white" href="https://www.example.com">Example Button</a></div>我希望这是有道理的。
@d00dlesnitch 这样你就可以使用 css 了吗？只要它是内联的？像这样？ jsfiddle.net/DIRTY_SMITH/vz04m3ph/23
@d00dlesnitch 如果您可以使用内联样式，那么您几乎可以做任何您想做的事情，您也可以内联运行脚本。

【解决方案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>

【讨论】：