HTML邮件暗黑模式下background-image适配问题求助

问题背景 #

在适配HTML邮件的明暗模式时，通过prefers-color-scheme媒体查询为.logo类切换背景图的方式无法生效，但其他CSS属性（如文本颜色）在相同媒体查询中能正常工作。当前使用的代码如下：

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

@media (prefers-color-scheme: dark) {
  .logo {
    background: url(logo-dark.png) center center no-repeat;
  }
}

@media (prefers-color-scheme: light) {
  .logo {
    background: url(logo-light.png) center center no-repeat;
  }
}

.logo {
  display: block;
  height: 42px;
  width: 162px;
}

可能原因及解决思路 #

1. 邮件客户端对背景属性的支持限制

绝大多数邮件客户端（尤其是Outlook系列、部分移动端客户端）对CSS背景属性的支持非常有限，动态媒体查询中切换背景图的场景支持度更低。

替代方案：
改用<img>标签结合<picture>实现模式切换，兼容性更好：

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="logo-dark.png">
  <source media="(prefers-color-scheme: light)" srcset="logo-light.png">
  <img src="logo-light.png" alt="品牌Logo" class="logo">
</picture>

注：部分老旧客户端不支持<picture>，兜底的<img>能保证基础显示效果。

2. CSS优先级或加载顺序问题

虽然媒体查询的优先级高于普通类选择器，但如果基础样式定义在媒体查询之后，可能会出现意外覆盖。可以调整代码顺序，把基础样式放在媒体查询之前，或者临时添加!important测试（不推荐长期使用，避免样式冲突）：

.logo {
  display: block;
  height: 42px;
  width: 162px;
}

@media (prefers-color-scheme: dark) {
  .logo {
    background: url(logo-dark.png) center center no-repeat !important;
  }
}

@media (prefers-color-scheme: light) {
  .logo {
    background: url(logo-light.png) center center no-repeat !important;
  }
}

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

3. 图片路径错误

确认logo-dark.png和logo-light.png的路径正确：

• 若使用外部图片，改用完整绝对URL（如https://your-domain.com/logo-dark.png）；
• 若使用内嵌图片，需通过CID引用（如url(cid:logo-dark)），前提是将图片作为邮件附件嵌入并关联对应CID。

4. 媒体查询支持差异

部分邮件客户端（如桌面版Outlook）不支持prefers-color-scheme媒体查询，导致切换逻辑完全无效。

应对方案：

• 保留默认亮色Logo作为兜底；
• 针对不支持的客户端，使用条件注释显示固定版本的Logo。

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