当涉及到电子邮件中的文本图像时，最安全的方法是将文本呈现到图像上并提供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>

这将产生如下所示的“fudge”效果：

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

使用background-image属性，在您的示例中，它将如下所示

<div style="display: inline-block; background-image:url('http://www.livetochallenge.com/assets/blue-banner.png'); background-repeat: no-repeat;"> # Put this text on banner
  Put<br>
  Over<br>
  Image
</div>