如何在Zurb Foundation 6的HTML邮件中正确添加背景图片

嘿，这个问题在HTML邮件开发里真的太常见了！邮件客户端（尤其是Outlook Windows这种顽固派）对CSS背景图片的支持特别拉胯，网页端正常是因为浏览器的CSS支持完善，但邮件客户端大多用的是老旧的渲染引擎，直接用background-image根本不生效。结合你用的Zurb Foundation 6（应该是Foundation for Emails对吧？），给你几个靠谱的解决方案：

1. 用Foundation Emails内置的<background>组件（最省心） #

Foundation for Emails专门做了兼容多客户端的背景组件，它会自动生成VML代码（给Outlook Windows）和CSS背景（给其他客户端），不用你手动写兼容代码。把你原来的代码改成这样就行：

<background src="https://yourdomain.com/assets/img/BrownBG.png" bgcolor="#你的棕色 fallback 色值">
  <columns small="36" large="27">
    <spacer size="26"></spacer>
    <row>
      <columns small="18" large="18">
        <a>Link</a>
      </columns>
      <columns small="18" large="18">...</columns>
    </row>
  </columns>
</background>

注意：这里一定要把图片路径改成绝对路径，邮件客户端不认相对路径，比如assets/img/xxx.png要换成你网站的完整URL。

2. 手动添加VML fallback（适合不想用组件的情况） #

如果你想自己控制兼容代码，就得给Outlook单独加VML层——因为Outlook Windows用的是Word渲染引擎，完全不支持CSS背景图片。修改你的代码如下：

<columns small="36" large="27" style="position: relative; background-color: #你的棕色 fallback 色值; background-image: url('https://yourdomain.com/assets/img/BrownBG.png'); background-repeat: no-repeat; background-size: cover;">
  <!-- 仅针对Outlook Windows的VML代码 -->
  <!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 360px; height: [你的列高度，比如200px];">
    <v:fill type="tile" src="https://yourdomain.com/assets/img/BrownBG.png" color="#你的棕色 fallback 色值"/>
    <v:textbox inset="0,0,0,0">
  <![endif]-->

  <spacer size="26"></spacer>
  <row>
    <columns small="18" large="18">
      <a>Link</a>
    </columns>
    <columns small="18" large="18">...</columns>
  </row>

  <!-- 关闭VML标签 -->
  <!--[if mso]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</columns>

这里要注意：

• 替换width和height为你实际列的尺寸（Foundation的small=36对应360px左右，根据你的网格设置调整）
• 同样要用绝对路径
• 一定要加background-color作为图片加载失败的 fallback

3. 其他关键注意事项 #

• 禁用背景图片的客户端：有些客户端（比如Gmail的部分版本）会默认屏蔽背景图片，所以一定要设置背景色fallback，保证内容可读性
• 测试！测试！测试！：HTML邮件没有统一标准，一定要用主流客户端（Outlook、Gmail、Apple Mail、安卓邮件）实际测试，或者用专业工具验证
• 图片大小：背景图片不要太大，不然加载慢，用户可能看不到

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