html - 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 中有效。

2011 年展望:https://litmus.com/pub/2e23724/results#ol2011-full_on - 背景图片作品

2013 年展望:https://litmus.com/pub/2e23724/results#ol2013-full_on - 背景图像损坏

谢谢你的帮助。

Answer 1

使用带有 base64 编码图像的多部分电子邮件，例如:

The following figure shows a message that was sent using the message format MHTML. It encodes the HTML objects as images in MHTML format, and retrieves the SKY.jpg image from the location in the ASP page. It encodes the image in BASE-64, and gives the image a CID, to which it internally links the image SRC attribute.

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