Outlook 2013 背景图像损坏

Question

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

代码：

<table cellpadding="0" cellspacing="0" border="0" width="580" style="font-family: Arial;">
        <tr>
        <td background="http://test.endlesspeak.cz/img/bg-deepak.jpg" bgcolor="#a7a8ab" width="580" height="242" 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 - 背景图片损坏

感谢您的帮助。

Answer 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:part1.mimetest-15@dsv.su.se">

--==boundary-1
Content-Type: image/gif
Content-ID: <part1.mimetest-15@dsv.su.se>
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

Answer 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>

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