2012-10-02 104 views
1

我嘗試使用表格中的圖片創建電子郵件作爲背景圖片。我找到了一些應該可以工作的代碼。在大多數電子郵件客戶端它確實工作,但在Outlook 2010中,我看到圖像,但看不到文本。有什麼我可以做的,使其工作?發送帶有背景圖片的電子郵件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>HVAC Success Confirmation</title> 
</head> 
<body style="background-color: #999999; vertical-align: top;"> 
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> 
<tr> 
    <td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg');"> 
     <!--[if gte mso 9]> 
     <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" /> 
     <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: -5; left: -10; border: 0; z-index: 2;'> 
     <div> 
     <![endif]--> 
     <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;"> 
      <tr> 
      <td height="350" align="center" valign="top" style="padding-top:80px"> 
       <p>This table in here has a bunch of stuff I want to lay over the background image...</p>   
      </td> 
      </tr> 
     </table> 
     <!--[if gte mso 9]> 
     </div> 
     </v:shape> 
     <![endif]--> 
    </td> 
</tr> 
</table> 
</body> 
</html> 

我發現多個頁面像http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/但它並沒有讓我進一步。

+0

你怎麼可以標記我重複,當我在一年前問這個問題,另一個問題是,從本月起?那他不是重複的嗎? – Patrick

回答

0

我能做到這一點的唯一方法是通過此代碼(TD表)。我在Outlook客戶端2010中進行了測試 複製並粘貼這個,你唯一需要做的事情就是改變your_image.jpg(同一圖像有兩個這樣的實例,確保你更新了你的代碼)和#your_color。

<td bgcolor="#your_color" background="your_image.jpg"> 

<!--[if gte mso 9]> 

<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/> 

<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'> 

<![endif]--> 

<p>Text over background image.</p> 

<!--[if gte mso 9]> 

</v:shape> 

<![endif]--> 

</td> 

source

相關問題