HTML电子邮件中的图像掩码

Question

是否有可靠的方法将图像覆盖在基于表格的HTML电子邮件中的另一个图像上？请记住，为了正确呈现，样式需要内联。

Answer 1

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

一般来说答案是“不”。您不能将前景内容叠加在其他前景内容之上，并且添加bg图像的选项几乎不存在。但是，如果您可以使用单个大型bg图像管理body标签（和表格包装器），并结合一个或多个前景图像，那么“是”。

请参阅：http://blog.mailermailer.com/2011/04/background-images-in-html-email-the-naked-truth/

修改

在Litmus进行了一些详尽的测试后，答案是响亮的“不”。 Outlook 2007及更高版本仅支持2种显示bg图像的方式：使用background标记上的HTML body属性，并使用background-image标记上的内联body样式。但在这两种情况下，Outlook都会以不同于其他电子邮件阅读器的方式缩放图像，并且无法阻止bg图像平铺。

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

1. 无法叠加图像（或任何其他类型的内容）。
2. 不支持Bg图像。

Answer 2

从我可以收集的背景图片不支持所有浏览器。但是，您可能会发现this page from Campaign Monitor有用。至少它可以快速测试代码以确定它是否适合您的读者需求 - 如果我是您，请在实施之前检查您的电子邮件统计数据与客户的工作情况。

我相信以上关于“使所有电子邮件阅读器中都有bg图像的唯一方法是通过为body标签的HTML背景属性指定一个”也是正确的，尽管Campaign Monitor似乎另有说明。我会小心确定哪些浏览器/电子邮件客户端使用后备以及这是否会对您的设计产生负面影响。

支持Z Index，但Gmail中除外（因此可能不是那么好），您可以尝试使用它来创建设计。鉴于Gmail不支持它并且后备可能像罪一样丑陋，你可能不想尝试这个。