HTML邮件背景图兼容 Outlook

在 HTML 邮件中设置背景图片时，Outlook（尤其是桌面版的 Outlook for Windows）经常不会正确显示背景图，这是因为outlook 是使用 Word 作为邮件渲染引擎，而不是标准的 HTML/CSS 渲染方式。

推荐的解决方案：使用 VML（Vector Markup Language）兼容 Outlook
这是针对 Outlook 的专门写法，配合标准写法实现兼容多个客户端：

html 复制代码

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

是针对 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格式图片需要以下设置：

html 复制代码

<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，这是标准的屏幕分辨率，确保图片和文本在屏幕上的显示效果符合预期。