HTML邮件背景图片在Outlook 2016桌面端无法正常显示问题求助

核心原因 #

Outlook 2007及之后的桌面版本（包含2016）采用Microsoft Word作为HTML渲染引擎，原生不支持CSS background-image 属性，这是本地预览正常但导入Outlook后背景消失的根本原因。

可行解决方案 #

方案1：添加VML语法适配Outlook背景图 #

这是目前兼容性最好的解决方案，在原有代码基础上添加Outlook专属的VML背景声明即可，同时保留原有CSS背景适配其他邮件客户端。
完整适配后代码如下：

<html lang="zh-CN" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Outlook专属VML配置 -->
  <!--[if gte mso 9]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
  <!--[if gte mso 9]>
  <style type="text/css">
    v\:* { behavior: url(#default#VML); display: inline-block;}
    o\:* { behavior: url(#default#VML); display: inline-block;}
  </style>
  <![endif]-->
</head>
<body>
<table width="100%" style="border-spacing: 0;" role="presentation">
    <tr>
        <td class="padding content" style="padding-top: 90px; padding-bottom: 20px; padding-right: 20px; padding-left: 20px; width: 100%; text-align: center; font-size: 20px; background-image: url(https://i.ibb.co/9cTRh0Y/confetti.png); background-color: #ffffff; background-position: center; background-size: cover; position: relative;">
            <!-- Outlook专属VML背景声明 -->
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:100%;mso-width-percent:1000;mso-height-percent:1000;position:absolute;top:0;left:0;">
                <v:fill type="tile" src="https://i.ibb.co/9cTRh0Y/confetti.png" color="#ffffff" />
                <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;">
            <![endif]-->
            <p style="font-size: 23px; font-weight: bold; padding-bottom: 5px; line-height: 28px;">
                自助密码重置功能抽奖获奖公告 <br />
                <strong style="color: #007da5;">获奖人</strong>
            </p>
            <p style="font-size: 18px; line-height: 23px;">
                感谢所有注册SSPR功能的用户。<br />
                ICT部门共有48人完成注册！<br />
                现在公布20美元星巴克礼品卡的获奖人是...
            </p>
            <p style="text-align: center; font-size: 23px; font-weight: bold; padding-bottom: 5px; line-height: 28px;">获奖人！</p>
            <p style="font-size: 12px; line-height: 23px;">我们将单独联系获奖人发放奖品</p>
            <!-- Outlook专属VML闭合标签 -->
            <!--[if gte mso 9]>
                </v:textbox>
            </v:rect>
            <![endif]-->
        </td>
    </tr>
</table>
</body>
</html>

注：如果不需要背景图平铺，可将v:fill标签的type属性值从tile改为frame。

方案2：设置兜底背景色 #

如果背景图不是必须元素，可以给td的style属性添加background-color: [匹配的色值]，保证Outlook下显示效果不会偏差过大。

方案3：背景图与内容合并（备选） #

如果适配代码调整后仍有异常，可以将当前区块的背景和文字内容合并为整图插入，兼容性最好，但缺点是文字无法被选中，不适用需要可复制内容的场景。

注意事项 #

• 所有图片链接需使用HTTPS协议，避免被Outlook安全策略拦截
• 建议直接在目标版本Outlook中发送测试邮件验证最终效果

内容的提问来源于stack exchange，提问作者C.Radford