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属性。

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

<强>参考

Answer 2

2007/2010/2013使用另一个旧版本的电子邮件呈现版本，因此更有可能出现一些错误。这是一个适合我的版本（取自responsive.email）：

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

请注意所有元素的高度都与图像高度相对应 - 否则它将无效。

Outlook 2013背景图像坏了

2 个答案: