HTML邮件中的图像遮罩

Question

在基于表格的HTML电子邮件中，有可靠的方法可以将一张图片叠加在另一张图片上吗？请记住，为了正确呈现，样式需要内联。

- conbask

Answer 1

显然，在所有电子邮件阅读器中都能正常显示背景图像的唯一方法是为body标签的HTML背景属性（适用于Outlook 2007、2010）和占据整个页面的HTML表格的HTML背景属性（适用于其他所有电子邮件阅读器）指定一个背景图像。似乎不可能在其他任何地方显示所有电子邮件阅读器中的背景图像。

一般而言，答案是否定的。您不能将前景内容叠加在其他前景内容上，并且添加背景图像的选项几乎不存在。但是，如果您可以使用单个大的body标签（和表格包装器）的背景图像以及一个或多个前景图像，则可以实现。http://blog.mailermailer.com/2011/04/background-images-in-html-email-the-naked-truth/

编辑：

在Litmus上进行了一些详尽的测试后，答案是“否”。Outlook 2007及更高版本仅支持两种显示背景图像的方式：在标签上使用HTML background属性和在标签上使用内联background-image样式。但在这两种情况下，Outlook缩放图像的方式与其他电子邮件阅读器不同，并且没有办法防止背景图像平铺。

对于所有实际目的，在需要支持各种电子邮件阅读器的情况下：

1. 没有办法叠加图像（或任何其他类型的内容）。
2. 不支持背景图像。

- Matt Coughlin

Answer 2

据我所知，背景图片并不被所有浏览器支持。但是，您可能会发现来自Campaign Monitor的此页面很有用。至少可以快速测试代码，以查看它是否适合您的读者需求-在实施之前，请检查您的电子邮件统计数据以确定哪些客户端有效。

我认为关于"在所有电子邮件阅读器中都能够使用背景图像的唯一方法是为body标签的HTML背景属性指定一个背景图像"的建议也是正确的，尽管Campaign Monitor似乎表明了相反的意见。我建议您仔细考虑哪些浏览器/电子邮件客户端使用回退，并确定这是否会对您的设计产生负面影响。

由于Z Index除了Gmail（因此可能不是很好）之外都受支持，因此您可以尝试使用它来创建设计。鉴于Gmail不支持它，而回退可能会非常丑陋，因此您可能不想尝试这种方法。

- Eoin