Html 不使用相对位置或负边距的图像上的文本_Html_Css_Text_Background Image

Html 不使用相对位置或负边距的图像上的文本

html css text

Html 不使用相对位置或负边距的图像上的文本,html,css,text,background-image,Html,Css,Text,Background Image,我试图把文字放在图像上。类似这样的内容（出于正当理由，我更改了背景图像）我正在使用的工具/应用程序有以下限制- 使用负边距不起作用使用位置：绝对和位置：相对不起作用像grid和flexbox这样的花哨玩意儿也不管用我知道我知道。你们都在想“这到底是什么？”。但如果你们中有人使用了salesforce visualforce电子邮件模板，你们就会知道我在说什么所以我需要在没有他们的情况下实现它。我希望图像在压缩和展开浏览器窗口时保持其纵横比当我使用背景图像html标记时，我注意到

我试图把文字放在图像上。类似这样的内容（出于正当理由，我更改了背景图像）

我正在使用的工具/应用程序有以下限制-

使用负边距不起作用
使用位置：绝对和位置：相对不起作用
像grid和flexbox这样的花哨玩意儿也不管用

我知道我知道。你们都在想“这到底是什么？”。但如果你们中有人使用了salesforce visualforce电子邮件模板，你们就会知道我在说什么

所以我需要在没有他们的情况下实现它。我希望图像在压缩和展开浏览器窗口时保持其纵横比

当我使用背景图像html标记时，我注意到背景图像并没有保持它的纵横比。在全屏模式下，它水平拉伸（我使用的实际图像中有动画角色的图形，可见的图像水平拉伸）

但当我使用img标签时，图像很好地适应了全屏，并且在我更改浏览器窗口大小时保持了其纵横比

<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">

所以我想我需要想出一个不使用背景图像（或负边距或位置：relative）的解决方案，并以某种方式在其上获取文本

我读过一篇帖子，一个人建议用桌子进行黑客攻击-

这似乎在一定程度上起了作用。我需要帮助修理它。这是我最后的代码-

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <div>
        <table>
          <tr>
            <td></td>
            <td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
          </tr>  
          <tr>
            <td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
          </tr>  
        </table>
    </div>
</body>
</html>


感谢您提交反馈

我面临的问题是，如果我过度压缩浏览器窗口，文本会浮在蓝色图像上方，如下所示

任何帮助都将不胜感激。文本和图像都是表的一部分。有没有办法确保它们保持在表边界内，从而保持重叠？

您需要在

元素中对齐顶部的图像，因为其默认值为中间。这就是为什么它以这种方式排列，并在上面和下面留出空间

因此，将

垂直对齐：top

添加到

元素中

td {
  vertical-align: top;
}

td {
  vertical-align: top;
}