2014-03-24 94 views
2

我在Outlook 2007/2010/2013中有背景圖像問題。Outlook 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 - 背景圖片破

謝謝你的幫助。

+0

我對Outlook電子郵件的怪癖並不是很熟悉,但是你可以在其上添加style屬性嗎? style =「background-image:url(http://test.endlesspeak.cz/img/bg-deepak.jpg);」 – dzny

+0

它也不起作用: -/ – Kasta

+0

有關此堆棧溢出問題的鏈接可能會對您有所幫助。祝你好運。電子郵件爆炸是一個痛苦。 http://stackoverflow.com/questions/3587328/background-image-on-td-in-outlook-2007 – dzny

回答

0

使用多部分電子郵件base64編碼圖像,諸如以下:

下圖顯示使用消息格式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:[email protected]"> 

--==boundary-1 
Content-Type: image/gif 
Content-ID: <[email protected]> 
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" 

參考

0

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> 

小心點 - 否則將無法正常工作。