在 HTML 郵件中設置背景圖片時,Outlook(尤其是桌面版的 Outlook for Windows)經常不會正確顯示背景圖,這是因為outlook 是使用 Word 作為郵件渲染引擎,而不是標準的 HTML/CSS 渲染方式。
推薦的解決方案:使用 VML(Vector Markup Language) 兼容 Outlook
這是針對 Outlook 的專門寫法,配合標準寫法實現兼容多個客戶端:
<tr><td valign="top" width="660" height="664" align="top"background="你的背景圖片鏈接"style="background-image: url('你的背景圖片鏈接'); background-repeat: no-repeat; background-size: 660px 664px; background-position: center; vertical-align: bottom; padding: 0; margin: 0px; text-align: center; background-color: #002329;"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;display:block;height:664px;"><v:fill type="frame" src="你的背景圖片鏈接" /><v:textbox inset="0,0,0,0"><![endif]--><table cellpadding="0" cellspacing="0" align="center"></table><!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
</tr>
<!--[if gte mso 9]> 和 <![endif]--> 是針對 Outlook 2007 及以上版本的條件注釋,只有 Outlook 會讀取。
<v:rect> 是 VML(Vector Markup Language)標簽,VML 是微軟開發的一種矢量標記語言,主要用于早期的 IE 瀏覽器和 Outlook 中。
xmlns:v="urn:schemas-microsoft-com:vml":定義 VML 的命名空間。
fill="true":表示矩形需要填充。
stroke="false":表示矩形不需要邊框。
<v:fill> 用于填充矩形的內容。
type="frame":指定填充類型為框架。
src="https://www.xxxxxxx":指定填充的圖片來源,即使用該鏈接的圖片作為矩形的背景。
<v:textbox> 用于在 VML 圖形中添加文本框。
inset="0,0,0,0":設置文本框的內邊距為 0。
在 Outlook 中,由于其使用的渲染引擎的特殊性,普通的 CSS 背景圖片設置可能無法正常顯示,
因此使用 VML 來實現背景圖片的兼容顯示。
在使用 VML為 Outlook 兼容背景圖時,對圖片格式有一定要求
VML 目前能夠很好地支持 JPEG 、PNG格式的圖片,但如果要使用PNG格式圖片需要以下設置:
<head><!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<xml> 標簽用于包裹 XML 代碼。
<o:OfficeDocumentSettings> 是一個 XML 命名空間的標簽,用于設置 Office 文檔的相關設置。
<o:AllowPNG/>:允許在文檔中使用 PNG 格式的圖片。在早期的 Outlook 版本中,默認可能不支持 PNG 圖片,通過這個設置可以確保 PNG 圖片能夠正常顯示。
<o:PixelsPerInch>96</o:PixelsPerInch>:設置文檔的每英寸像素數為 96,這是標準的屏幕分辨率,確保圖片和文本在屏幕上的顯示效果符合預期。