使用HTML邮件模板时Outlook中背景图片无法显示的问题

在Outlook客户端发送HTML邮件时，背景图片未正常渲染，仅显示蓝色占位框，现有代码无法解决该问题。

原代码问题点 #

1. VML <v:rect> 的宽度（600px）与CSS中td的宽度（750px）不匹配，导致布局错位
2. VML的v:fill缺少背景色降级属性，图片加载失败时仅显示默认蓝色框
3. VML命名空间写法错误（xmlns_v应为xmlns:v），导致Outlook无法识别VML元素

修正后的代码 #

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
  <tr>
    <td>
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height:430px; background-color:#B5CFE3;">
        <v:fill type="tile" src="https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png" color="#B5CFE3" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <![endif]-->
      <div>
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>
            <td style="background: url(https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png) #B5CFE3; background-size:cover; background-position:center; width:600px; height:430px;">
              <!-- 这里添加你的内容 -->
            </td>
          </tr>
        </table>
      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>

关键修复说明 #

• 统一VML与CSS的尺寸参数（宽度600px、高度430px），消除布局冲突
• 给v:fill添加color属性，与CSS背景色保持一致，作为图片加载失败的降级方案
• 修正VML命名空间写法，确保Outlook能正确解析VML代码
• 将VML的type从frame改为tile，适配Outlook的背景图渲染逻辑

额外注意事项 #

• 确认背景图片URL无防盗链限制，Outlook无法加载带防盗链的图片
• 测试时使用Outlook桌面客户端（Windows版）直接预览，网页版Outlook渲染逻辑不同
• 避免使用background-size: cover之外的复杂背景属性，Outlook仅支持有限的CSS背景特性

内容的提问来源于stack exchange，提问作者user9437856