Div 在 HTML 电子邮件的图像上

Question

我要在图像上查看一些文字。我可以使用 margin 或 position 来实现此目的，但由于它是用于电子邮件的 HTML，因此它们无法正常工作。下面是我的代码。

<div style="padding-right:25px;padding-left:20px">
  <div style="padding-top:5px;padding-bottom:10px">
    <table style="text-align:center;border:1px solid #ddd;border-spacing:0;border-collapse:collapse">
        <tbody><tr>
            <td style="text-align:center">
                <div style="width: 100%;">
                    <img src="myimage.png"/>
                    <div style="margin-top:-280px;font-size: 20px"><b><font face="Calibri">Text</font></b></div>
                    <div style="font-size:48px;line-height:58px;font-weight:bold;margin-top:40px;"><span><font face="Calibri">abc</font></span></div>
                </div>
             </td>
         </tr></tbody>
     </table>
  </div>
</div>

需要这方面的帮助。提前致谢。

Answer 1

从 Campaignmonitor.com article 使用背景图片将整封电子邮件应用于 table，如下所示：

<table background="bg.png"><tr><td><!-- TEXT HERE --></td></tr></table>

和 CSS 后备：

body {
    background-image: url('bg.png');
    background-repeat: repeat-y no-repeat;
    background-color: #333;
    margin: 0;
    padding: 0;
}

此外，他们引用了一个工具来制作 "bullet proof email background" https://backgrounds.cm/

Div 在 HTML 电子邮件的图像上

Div over an image for HTML email

html

css

html-email