Outlook 2013 背景图片损坏

问题描述

我在 Outlook 2007/2010/2013 中遇到背景图片问题.

代码:

<tr><td background="http://test.endlesspeak.cz/img/bg-deepak.jpg" bgcolor="#a7a8ab" width="580" height="242" style="text-align: left; vertical-对齐:中间；颜色:#203244；字体大小:12pt；填充:0；边距:0；"><!--[如果 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="中间"><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 spiritity 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.</
<!--[如果 gte mso 9]></v:文本框></v:rect><![endif]--></td></tr>

问题仅在 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 - 背景图片损坏

感谢您的帮助.

解决方案

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

<!--[if gte mso 9]><v:rect fill="true"笔画=假"style="width:700px;height:50px;"><v:fill color="#FFFFFF";src=你的图像.png"；类型=瓷砖"/><v:textbox style="mso-fit-shape-to-text:true";inset=0,0,0,0"><![endif]--><tr class="a8";样式=高度:50px"><td valign="top">一些内容</td></tr><p style="margin:0;mso-hide:all"><o:p></o:p></p><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>

注意所有元素的高度都对应图片的高度 - 否则将不起作用.

I have problem with background image in Outlook 2007/2010/2013.

Code:

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

Problem is just in Outlook 2007/2010/2013. In Outlook 2002/2003/2011 it works.

Outlook 2011: https://litmus.com/pub/2e23724/results#ol2011-full_on - background image works

Outlook 2013: https://litmus.com/pub/2e23724/results#ol2013-full_on - background image broken

Thank you for help.

解决方案

2007/2010/2013 uses another and older version of the email rendering version, so it's more likely to get some errors. Here is a version that works for me:

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

Take care that the heights of all elements are corresponding to the image height - otherwise it will not work.

这篇关于Outlook 2013 背景图片损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！