模板顶部整块用 background-image 做渐变背景,Outlook 里那块是纯白,文字浮在白底上几乎看不清。乍看像缓存或者权限的锅,追下去往往不是。

<!--[if mso]>
<v:rect xmlns:v='urn:schemas-microsoft-com:vml' fill='true'>
<v:fill type='frame' src='https://cdn.example.com/bg.jpg'/>
</v:rect>
<![endif]-->

追下去是这么回事:Outlook 不支持 CSS 的 background-image,只认 VML 里的 v:background 或表格的 background 属性。渐变在它那里根本没有对应实现。

「邮件背景图 VML」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。一次只改一处,改完立刻验证,几个改动叠在一起,出问题就说不清是谁导致的。

先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。别只看报错的最后一行,往上看几行,真正的起因通常在上面。

同类问题如果隔一段时间又出现,多半是某个定时任务或重启流程把改动冲掉了。

具体做法是,外层加一层 VML 条件注释写背景,非 Outlook 走 CSS 背景;渐变改成一张固定宽度的图片,兼容性比 CSS 渐变好得多;在 Outlook 和 Gmail 各看一次,两边背景都要在。

验收就看一点,Outlook 里顶部背景图正常铺满,白底上的文字有足够对比。

作者 9823189