Outlook 2013 背景图像损坏

Posted 2023-03-15

【中文标题】Outlook 2013 背景图像损坏

【英文标题】：Outlook 2013 background image broken

【发布时间】：2014-05-02 00:51:21

【问题描述】：

Outlook 2007/2010/2013 中的背景图片有问题。

代码：

<table cellpadding="0" cellspacing="0" border="0"  style="font-family: Arial;">
        <tr>
        <td background="http://test.endlesspeak.cz/img/bg-deepak.jpg" bgcolor="#a7a8ab"   style="text-align: left; vertical-align: middle; color: #203244; font-size: 12pt; padding: 0; margin: 0;">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:242px;margin: 0; padding: 0;">
            <v:fill type="tile" src="http://test.endlesspeak.cz/img/bg-deepak.jpg" color="#a7a8ab" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->  
          <div valign="middle">

            <p valign="middle" style="padding: 0; margin: 50px 260px 0 55px; vertical-align: middle; font-family: Arial; color: #203244; font-size: 12pt;">Poprvé navštíví ČR <b style="color: #2a80b9; text-decoration: underline;">Deepak Chopra</b>, světová autorita v oblasti spirituality a osobního rozvoje, populární americký spíkr a spisovatel. Jako proslulý lékař formuloval vlastní teze léčení, ve kterých propojuje tradiční východní léčitelské umění s tím nejlepším, co nabízí západní medicína.</p>

          </div>
          <!--[if gte mso 9]>
            </v:textbox>
          </v:rect>
          <![endif]-->
        </td>
    </tr>

</table>

问题只是在 Outlook 2007/2010/2013 中。在 Outlook 2002/2003/2011 中它可以工作。

Outlook 2011：https://litmus.com/pub/2e23724/results#ol2011-full_on - 背景图片有效

Outlook 2013：https://litmus.com/pub/2e23724/results#ol2013-full_on - 背景图片损坏

感谢您的帮助。

【问题讨论】：

我对 Outlook 电子邮件的怪癖不是很熟悉，但是你能在上面放一个样式属性吗？ style="background-image:url(test.endlesspeak.cz/img/bg-deepak.jpg);"

它也不起作用：-/

此相关堆栈溢出问题的链接可能会对您有所帮助。祝你好运。电子邮件爆炸是一种痛苦。 ***.com/questions/3587328/…

最好不要使用图像作为背景。大多数 Outlook 旧版本仍然不支持背景图像。最好使用<img> 标签。

***.com/questions/23280715/…

【参考方案1】：

使用带有 base64 编码图像的 Multipart 电子邮件，例如：

下图显示了使用消息格式 Mhtml 发送的消息。它将 HTML 对象编码为 MHTML 格式的图像，并从 ASP 页面中的位置检索 SKY.jpg 图像。它以 BASE-64 对图像进行编码，并为图像提供 CID，并在内部将图像 SRC 属性链接到该 CID。

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://www.sky.com

<td Background="cid:[e-mail]">

--==boundary-1
Content-Type: image/gif
Content-ID: <[e-mail]>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="SKY.gif"

这将在相关代码中转化为类似的内容：

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://test.endlesspeak.cz

<td background="cid:bg-deepak.jpg">
--==boundary-1
Content-type: image/jpg; name="bg-deepak.jpg"
Content-ID: <bg-deepak.jpg>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="bg-deepak.gif"

参考文献

Messaging Formats

Binary2Base64

MHTML Test Messages

MIME Headers

POP Email Client with full MIME Support

RFC 5034 - The Post Office Protocol (POP3) Simple Authentication and Security Layer (SASL) Authentication Mechanism

How to create an email with embedded images that is compatible with the most mail clients

【参考方案2】：

2007/2010/2013 使用另一个旧版本的电子邮件呈现版本，因此更容易出错。这是一个适合我的版本：

<td background="yourimage.png" bgcolor="#FFFFFF" class="a8 a9 a10" style="height:50px;background-image:url('yourimage.png')" valign="top">
<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:700px;height:50px;"><v:fill color="#FFFFFF" src="yourimage.png" type="tile" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="a8" style="height:50px">
<td valign="top">some content
</td>
</tr>
</table>
<p style="margin:0;mso-hide:all">
<o:p> 
</o:p>
</p>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
</td>

注意所有元素的高度都与图片高度相对应，否则将无法正常工作。