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

Question

我正在尝试将文字放在图片上。像这样的（出于礼节原因，我已经更改了背景图片）

我正在使用的 tool/app 有以下限制 -

使用负边距不起作用
使用 position:absolute 和 position:relative 不起作用
网格和 flexbox 等花哨的东西也不起作用

我知道我知道。你们都在想"what the heck is it?"。但是如果你们中有人使用过 salesforce visualforce 电子邮件模板，你就会知道我在说什么。

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

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

<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">

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

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

所以我想我需要想出一个不使用背景图像（或负边距或 position:relative）的解决方案，并以某种方式在上面添加文字。

我读了一篇 post，其中有人建议使用 tables 进行黑客攻击 - How to put text over an image without absolute positioning or setting the image as backbround

它似乎在一定程度上发挥了作用。我需要帮助修复它。这是我的最终代码-

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

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

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

Answer 1

您需要将 <td> 元素中的图像对齐到顶部，因为它的默认值为中间。这就是为什么它以这种方式对齐并在上方和下方给出 space。

因此，将 vertical-align: top 添加到 <td> 元素。

td {
  vertical-align: top;
}

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

text over image without using relative position or negative margins

html

css

text

background-image