html - 在 HTML 电子邮件中叠加图像

Question

来自 emailonacid 的 Mozify 在将图像加载到电子邮件中之前使用表格单元格的彩色马赛克来呈现图像的近似值。

加载图像时，它会覆盖整个表格 - 马赛克被隐藏。我假设它在加载后位于图像“后面”。

Mozify 的一个选项是将包含文本和背景的图像替换为带有 HTML 文本的 HTML 背景(纯色)。如何在一个单元格中同时包含文本和 img，但在加载图像时不显示文本？

这是如何实现的？我本以为，如果一个图像在一个单元格中，它会简单地将所有其他单元格向下和向四周推以适合自己。

Answer 1

方法一

Mozify 过去“只是”在具有较小图像的单元格中分割较大图像，并使用它们的背景颜色来实现马赛克效果。

使用这种解决方案，当未加载图像时，它只显示单元格的背景。

您还可以使用样式格式化替代文本(适用于 gmail、yahoo 和大多数移动设备):

<img src="http://domain.tld/img/image.jpg" alt="Your text!" style="font-size:22px; color:#ffffff; font-family:arial" >

优点:

• 它得到普遍支持
• 它简单有效(即使没有 Mozify)。 Photoshop 就足够了。

缺点:

• 它非常影响邮件的重量
• 由于 X 和警报文本，邮件在 Outlook 中看起来不太好要求下载每个单元格中的图像。

方法二

当前版本的 Mozify (v1) 有一个完全不同的方法:它为马赛克创建了一个替代表(带有单元格和背景，没有图像切片)

<DIV CLASS="tempMozHolder" ID="m_wwlIf" STYLE="display:inline; margin:0; padding:0; float:none">
  <STYLE TYPE="text/css">
    .ExternalClass .ecxhm1_wwlIf{width:690px !important;height:620px !important; float:none !important}
    .ExternalClass .ecxhm2_wwlIf{display:none !important}
    .olwwlIf td b{width:1px;height:1px;font-size:1px}
    .olwwlIf{-webkit-text-size-adjust: none}
  </STYLE>
  <!--[if gte mso 9]><style>
.olwwlIf{display:none !important}
</style><table cellpadding="0" cellspacing="0" style="display:block;float:none;" align=""><tr><td><img alt="" border="0" height="620" src="http://domain.tld/img/image.jpg" style="margin: 0px; padding: 0px; display: block;" title="" width="690"></a></td></tr></table><style type="text/css">/*<![endif]-->
  <TABLE ALIGN="" BORDER="0" CELLPADDING="0" CELLSPACING="0" CLASS="olwwlIf" STYLE="display:block;float:none" WIDTH="690">
    <TBODY>
      <TR>
        <TD CLASS="olwwlIf" STYLE="padding:0px 0px 0px 0px;">THAT'S YOUR MOSAIC TABLE</TD>
      </TR>
    </TBODY>
  </TABLE>
  <!--[if gte mso 9]>*/</style><![endif]-->
</DIV>

诀窍是css和MS脚本的结合。之间的代码 <!--[if gte mso 9]>和 <![endif]-->将仅由 Outlook 读取。

优点:

• 这个 HTML 比方法 1 更轻量
• 邮件在支持的地方看起来非常酷

缺点:

• 它没有得到普遍支持
• 比较复杂，你需要Mozify来自动化

希望这有帮助；)