如何在JavaScript生成的邮件HTML中实现文字叠加在图片指定区域？

要实现邮件正文中文字叠加在图片指定白色区域，核心是利用内联定位样式结合表格布局（适配邮件客户端特性），以下是两种可靠的实现方式：

方式一：绝对定位叠加（适配现代邮件客户端） #

给容器单元格设置相对定位，将图片和文字都设为绝对定位，精准控制文字位置：

// 假设用户输入的消息存储在message变量中
const emailBody = `
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- 容器单元格：必须指定与图片一致的宽高，作为定位参考 -->
    <td style="position: relative; width: 600px; height: 400px;">
      <!-- 背景图片：绝对定位占满容器 -->
      <img src="https://your-image-url.com/bg.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block;" alt="邮件背景">
      <!-- 消息文本：绝对定位到白色区域，调整top/left/width/height匹配你的图片区域 -->
      <div style="position: absolute; top: 120px; left: 80px; width: 350px; height: 220px; font-size: 14px; line-height: 1.6; color: #333;">
        ${message}
      </div>
    </td>
  </tr>
</table>
`;

方式二：背景图+内边距定位（兼容性更好） #

利用单元格背景图，通过内边距将文字推到白色区域，适配更多老式邮件客户端：

const emailBody = `
<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <!-- 单元格设置背景图、固定宽高，用padding定位文字 -->
    <td style="background-image: url('https://your-image-url.com/bg.jpg'); background-size: cover; width: 600px; height: 400px; padding: 120px 0 0 80px;">
      <!-- 消息文本：设置宽高匹配白色区域 -->
      <div style="width: 350px; height: 220px; font-size: 14px; line-height: 1.6; color: #333;">
        ${message}
      </div>
    </td>
  </tr>
</table>
`;

关键注意事项 #

• 替换代码中的width/height为你的图片实际尺寸，确保容器与图片比例一致
• 根据图片白色区域的实际位置，调整top/left（定位方式）或padding（背景图方式）的数值
• 图片必须使用公网可访问的URL，邮件客户端无法加载本地图片
• 测试主流邮件客户端（Gmail、Outlook、Apple Mail）的显示效果，个别老式客户端可能需要微调样式

内容的提问来源于stack exchange，提问作者hamtickell