html - 如何将文本放在图像上(在电子邮件中)？

Question

因为这是不可能的:::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>

Answer 1

当谈到电子邮件中的文字叠加图像时，最安全的方法是将文字渲染到图片上并提供 ALT 标签。这使您可以 100% 保证所有文本始终显示在图像上，无论使用何种设备或电子邮件客户端。许多客户端不支持背景图片，因此虽然您可以在一个客户端上正确呈现它，但总有一些用户仍在使用 2009 年以来的 Outlook。

我的一些同事使用过这个网站并取得了不错的效果:https://backgrounds.cm/ - 但同样，它不适用于所有客户端/设备。

另一种解决方案是“捏造”背景。例如，如果文本要覆盖在纯色图形上，您可以将其独立切出并使用背景色。这样文本仍然存在。例如 - 您提供的图像似乎是横幅。也许中间部分只是一个背景颜色为#2E3E65 的 TD，周围的元素有您提供的横幅图像。

尽管如此，我强烈建议走图片路线。然后可以将重点放在响应测试上，而不是编辑上。希望我有所帮助。

编辑 看看这个:https://www.campaignmonitor.com/css/ 如果走代码路线是绝对必要的，那么它是一个非常方便的指南，它说明了哪些元素/标签/属性适用于所有主要的电子邮件客户端。 如果客户坚持使用实时文本，传递给客户也是有益的信息 :-)

编辑 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>

这将产生如下所示的“软糖”效果: .

注意 - 我只是使用 photoshop 水平翻转图像。另外，请忽略轻微的颜色变化。这只是我如何导出翻转图像的问题。