HTML邮件模板页脚纯色替换为背景图不生效问题求助

问题原因 #

• 使用了C盘开头的本地绝对路径、本地相对路径作为图片地址，邮件客户端无权限访问你本地电脑的文件，因此所有图片都无法加载。
• HTML邮件客户端对CSS背景图的兼容性极差，仅在style属性中声明background-image无法覆盖多数旧版邮件客户端（尤其是Outlook全系列）的兼容要求。
• 删除background-color后，背景图加载失败时没有兜底背景，页脚内的文字为浅色系，会和空白背景融合，看起来就像页脚区域完全消失。

解决方案 #

1. 替换所有图片路径为公网HTTPS绝对路径 #

将所有背景图、logo、社交图标、装饰图的路径全部替换为公网可直接访问的HTTPS绝对路径，格式如https://你的业务域名.com/images/footerster9605468.png，不得使用本地路径或相对路径。

2. 兼容多客户端的背景图写法 #

针对邮件场景优化背景图声明，同时添加普通html属性、CSS样式、Outlook专属VML语法保障兼容，同时保留background-color作为兜底。

修正后的核心代码示例 #

<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="https://替换为你的公网背景图地址.png" color="#02d19b" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" 
background="https://替换为你的公网背景图地址.png"
style="mso-table-lspace: 0; mso-table-rspace: 0; background-color: #02d19b; background-image: url('https://替换为你的公网背景图地址.png'); background-repeat: no-repeat; background-position: center center; background-size: cover;" 
width="640">
<!-- 原有table内部的tbody、tr、td等内容保持不变 -->
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>

3. 额外注意事项 #

• 背景图尺寸建议和容器宽度保持一致，此处容器宽640px，建议背景图切图宽度也设为640px，避免拉伸变形。
• 所有内嵌图片同样需要替换为公网HTTPS路径，否则也会出现加载失败的问题。

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