如何在Microsoft Flow发送的Outlook邮件中实现文字覆盖背景图片效果

问题根因 #

Microsoft 365 版本的Outlook采用Word内核渲染HTML邮件，不支持position定位、z-index层级控制等标准CSS属性，对普通div的background-image属性兼容性也极差，因此你前两套代码都无法达到预期效果。

可行实现方案 #

使用Outlook专属的VML标记配合mso条件注释实现背景图，同时兼容其他邮件客户端，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <!-- 适配VML命名空间 -->
  <!--[if mso]>
  <xml>
    <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
  </xml>
  <![endif]-->
</head>
<body style="margin:0; padding:0; width:100% !important;">
  <!-- 背景图容器，宽高和你的背景图尺寸保持一致 -->
  <table width="500" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px; margin:0 auto;">
    <tr>
      <td background="data:image/jpeg;base64,@{outputs('GifFile')?['body']['$content']}" width="500" height="600" valign="top" style="background-position:center center; background-repeat:no-repeat;">
        <!--[if mso]>
        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:500px;height:600px;">
          <v:fill type="frame" src="data:image/jpeg;base64,@{outputs('GifFile')?['body']['$content']}" color="#ffffff" />
          <v:textbox inset="0,0,0,0">
        <![endif]-->
        <!-- 这里放你的文字内容，所有内容都写在这个div里 -->
        <div style="padding:25px; color:#000; font-size:14px;">
          CONTENT <br/>
          More Content
        </div>
        <!--[if mso]>
          </v:textbox>
        </v:rect>
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

注意事项 #

• 代码中容器的宽高需要和你使用的背景图实际宽高完全一致，避免出现拉伸变形
• 图片base64编码不要包含换行、特殊字符，单张图片大小建议控制在200KB以内，避免Outlook自动截断内容
• 不要在邮件代码中使用position: fixed、position: absolute、z-index这类属性，Outlook内核完全不识别
• 如果你需要动态插入Microsoft Flow返回的图片内容，直接替换代码中@{outputs('GifFile')?['body']['$content']}占位符即可

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