如何将文本放在图像上（在电子邮件中）？

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/ - 但同样，它不会在所有客户端/设备上运行。

另一个解决方案是＆＃34; fudge＆＃34;的背景。例如，如果文本将在纯色图形上方，则可以单独对其进行切片并使用背景颜色。这样文本仍然有效。例如 - 您提供的图像似乎是横幅。也许中间部分只是一个背景颜色为＃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>

这将产生＆＃34;软糖＆＃34;效果如下：

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