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

Question

因为这是不可能的:::在内联HTML电子邮件之后？

如何将文字放在下面的图像上？

请记住,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来水平翻转图像.另外,忽略那种轻微的颜色变化.这只是我如何导出翻转图像的问题.