如何使用Nodemailer为HTML邮件指定区块设置背景图片

核心原因 #

邮件客户端对CSS支持度极低，常规前端页面的CSS背景写法在多数邮箱环境（尤其是Outlook、国内主流网页邮箱）无法直接生效，原有代码存在3个明确问题：

• CSS属性名拼写错误：正确属性为background-image，写的background-img是无效属性
• 错误将背景图作为普通<img>标签插入，图片会作为内容元素占位，无法作为底层背景铺在区块下
• 未做老旧邮件客户端的兼容处理，仅靠CSS属性无法覆盖Outlook这类使用Word内核渲染邮件的客户端
• 原有代码中width: 100vw的写法也存在兼容问题，vw单位在多数邮件客户端不被识别，会导致内容横向溢出。

正确配置步骤 #

1. 附件配置无需修改
   当前attachments字段里的背景图cid定义是正确的，保留原有cid: "background"的配置即可，不需要调整附件路径、文件名相关参数。

2. 删除冗余的背景图img标签
   把HTML里这段多余的代码删掉，这是普通内容图片的写法，不是背景图实现：

<div>
<img style="border: 1px solid #cee3ed" src="cid:background" alt="FPro Banner" width="10px">
</div> 

3. 替换为兼容全客户端的背景区块写法
   针对需要添加背景图的区块，同时写CSS背景样式+Outlook专属VML兼容代码，示例修改后的核心HTML片段如下：

<div style='max-width: 600px; margin: 0 auto;'>
  <div style='text-align: center;'>
      <img src="cid:fprobanner" alt="FPro Banner" width="320" />
  </div>
  <br>
  <!-- 以下为Outlook客户端兼容VML代码，必须放在背景区块外层 -->
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
    <v:fill type="frame" src="cid:background" color="#ffffff" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <!-- 实际带背景的内容区块 -->
  <div style="font-size:19px;
              font-family: Calibri, Futura;
              background-image: url('cid:background');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              background-position: center;
              padding: 20px;">
  <h1 style="
  width: 100%;
  color: white;
  text-align: center;
  background-color: #0099FF;
  "> Welcome! </h1>
  
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    Dear ${user.firstname ? user.firstname : "user"},
      <br>
      <br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Please verify your account by clicking the link
           <a href='${verify_link}' target='_blank'>HERE:</a>
           <br>
           <br>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           You will be redirected to create your account password.
           <br>
           <br>
  </div>
  <!-- 闭合Outlook兼容VML标签 -->
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->        
</div>

注意事项 #

• 所有样式必须写在元素的style内联属性里，不要写独立<style>标签的类样式，绝大多数邮箱会自动过滤非内联CSS
• 背景图文件建议压缩到200KB以内，尺寸和要展示的区块尺寸匹配，避免被邮箱拦截或加载缓慢
• background-image引用cid时格式必须为url('cid:你的cid值')，不要直接写文件名，也不要用background简写属性传cid，部分客户端无法识别简写形式的cid引用
• VML代码里的width属性值要和外层容器的宽度保持一致，color属性为图片加载失败时的兜底背景色，可以根据需求调整
• 把原来h1标签里的width:100vw改成width:100%，避免宽度溢出。

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