因为这是不可能的：::after 内联 HTML 电子邮件？ https://stackoverflow.com/questions/39411194/after-for-inline-html-email
如何在下面的图片上添加文字？
请记住position电子邮件似乎不支持负边距。
<img src="http://www.livetochallenge.com/assets/blue-banner.png">
<div style="display: inline-block;"> # Put this text on banner
Put<br>
Over<br>
Image
</div>
当涉及到电子邮件中的图像文本时，最安全的方法是将文本渲染到图像上并提供 ALT 标记。这可以让您 100% 保证所有文本始终显示在图像上，无论设备或电子邮件客户端如何。许多客户端不支持背景图像，因此虽然您可能会在某个客户端上正确呈现背景图像，但总有用户仍在使用 2009 年的 Outlook。
我的一些同事使用这个网站并取得了很好的效果：https://backgrounds.cm/ https://backgrounds.cm/- 但同样，它不适用于所有客户端/设备。
另一种解决方案是“伪造”背景。例如，如果文本将位于纯色图形上，您可以将其独立切片并使用背景颜色。这样文本仍然有效。例如 - 您提供的图像似乎是横幅。也许中间部分只是一个背景色为 #2E3E65 的 TD，周围的元素具有您提供的横幅图像。
尽管如此，我强烈建议走图像路线。然后可以将重点放在响应式测试上，而不是编辑上。希望我有所帮助。
EDIT看看这个：https://www.campaignmonitor.com/css/ https://www.campaignmonitor.com/css/如果绝对必须采用代码路线，那么这是一个非常方便的指南，说明了哪些元素/标签/属性适用于所有主要电子邮件客户端。如果客户坚持使用实时文本，那么向客户传递的信息也可能是有益的 :-)
EDIT 2
我只是在这里内联完成了所有事情。如果您想添加样式标签，则可以对标记进行大量清理，然后只需在其中添加样式（而不是在 html 中）。
<table style="width:300px; border-collapse: collapse; margin: 0; padding: 0; border: none;">
<tr style="height: 54px;">
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://www.livetochallenge.com/assets/blue-banner.png" style="margin: 0; padding: 0;"/></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none;"><div style="background-color: #354871; height: 37px; color: white; text-align: center; padding-top: 15px;"># Put this text on banner</div></td>
<td style="margin: 0; padding: 0; border-collapse: collapse; border: none; width: 36px;"><img src="http://i.imgur.com/OgwtHvr.png" style="margin: 0; padding: 0;"/></td>
</tr>
</table>
This will produce the "fudge" effect as seen below:
.
注意 - 我只是使用 Photoshop 水平翻转图像。另外，请忽略轻微的颜色变化。这只是我如何导出翻转图像的问题。