编写 HTML 电子邮件背景颜色和渐变的最佳方法

已发表: 2021-04-22

编码背景颜色听起来像是一项简单的任务，对吗？真相？即使是这种小样式也有一些缺陷，需要考虑一些因素才能在电子邮件客户端之间获得一致的渲染。

不仅仅是开发人员需要安抚收件箱之神。随着暗模式的发展势头越来越大，需要注意的环境甚至更多，其中一些环境需要电子邮件设计师在设计中应用背景颜色时格外小心。

在这篇博文中，您将了解到：

背景颜色的好处
如何编码纯色背景（+ 电子邮件客户端支持）
如何编写渐变背景（+ 电子邮件客户端支持）
优化暗模式的提示

为什么在电子邮件中使用背景颜色？

在提升您的电子邮件程序时，采用背景颜色策略可以满足一些需求。从技术角度来看，实施背景颜色不会为您的电子邮件增加任何加载时间，即使关闭图像，它们仍然可见。它们可以帮助分隔内容、调用消息或将电子邮件与订阅者收件箱中的其他电子邮件区分开来，从而可能增加受众的参与度。

在收件箱中脱颖而出

你可以创造一个有影响力的开场体验——就像这封来自 Blurb 的电子邮件。

英雄区重磅来袭。大胆的橙色背景与标志的蓝色形成鲜明对比，提升品牌形象。一旦读者滚动过英雄区域，次要内容就会位于白色背景上，为较大的副本提供理想的阅读体验。

分离出部分

如果您收到一封很长的电子邮件，颜色是一种在视觉上分隔不同内容块的好方法，因此感觉更易于理解。

咖啡馆巨头星巴克的促销电子邮件可能很长，一封电子邮件中包含多个促销活动。为了帮助部分彼此分开，使用了不同的背景颜色。

提升品牌形象

渐变是 Marketing Agency 1973 Ltd 品牌标识的一部分，这就是您经常在他们的电子邮件背景中发现粗体线性渐变的原因。背景渐变可以使构图看起来更加动态，甚至鼓励订阅者滚动。

那么将这些技术带入您的电子邮件开发的最佳方法是什么？我请我的队友和 Litmus 电子邮件的开发人员 Carin Slater 为我们提供有关编码纯色和渐变背景的详细信息。

如何编写纯 HTML 电子邮件背景颜色

背景颜色可以通过多种方式在多个位置进行编码。但是，电子邮件客户端对每种方法的支持并不相同。这是一个快速图表，显示了哪种背景样式代码和颜色代码方法适用于顶级电子邮件客户端。

电子邮件客户端支持背景颜色

样式代码	CSS 属性 “背景”和“背景颜色”				HTML 属性“bgcolor”
色标	6 位十六进制	3 位十六进制	RGB	RGBA	6 位十六进制	3 位十六进制	RGB	RGBA
苹果邮件 14	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
Outlook 2016 (macOS 10.12.6)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
Outlook 13、16、19（Windows 10）	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否
Outlook Office 365 (Windows 10)	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否
Outlook Office 365 (Mac OS 10.15)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
Windows 10 邮件	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否
Gmail 应用程序（Android 10）	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
Gmail 应用程序（iOS 13.4.1）	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
展望 (Android 7.0)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
展望 (iOS 12.0)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
三星邮件 (Android 7.0)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
iPad 11 Air（第 4 代 iOS 14.2）	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
iPhone 12 (iOS 14.2)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
AOL 邮件（边缘）	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否
康卡斯特（边缘）	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
Gmail (Chrome)	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
办公室 365	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
展望网	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✓ 是	✘ 否	✘ 否
网页版	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否
雅虎！邮件	✓ 是	✓ 是	✓ 是	✘ 否	✓ 是	✘ 否	✘ 否	✘ 否

我们都知道电子邮件客户端可能有点挑剔。那么编码背景颜色以使其适用于所有电子邮件客户端的最佳方法是什么？我将向您介绍我们的建议以及原因。

1.使用表格和表格单元格

HTML 中有四个地方可以添加背景色：

<身体>
<div>
<表>
<td>

添加背景颜色最安全的地方是在表格或表格单元格上。

<body> 标记在 Yahoo 和 AOL 中被删除，因此在那里应用的任何背景颜色都不会显示在这些电子邮件客户端中。并且在正文之后的包装 <div> 上放置颜色可以在除 Outlook 客户端之外的任何地方工作，因为它们不支持电子邮件中的 <div> 标签。

要获得最广泛的电子邮件客户端支持，请将您的整个电子邮件包裹在 100% 宽度的 <table> 标签中，并将您的背景颜色放在那里。并将表格单元格 <td> 用于电子邮件的各个部分，以便您在为特定内容块着色时具有更大的灵活性。

2. 使用 CSS 属性和 HEX 颜色代码或 RGB 值添加颜色

背景颜色可以通过多种方式编码：

使用 bgcolor HTML 属性
使用 CSS 属性 background-color
使用 CSS 速记属性背景
使用 6 位十六进制颜色代码
使用 3 位十六进制颜色代码
使用 RGB 颜色值

至于如何将背景颜色放在表格或表格单元格上，您应该使用 CSS 属性。

测试这两种 CSS 属性方法——背景色和背景——我们发现只要你只添加颜色（没有图像），它们都具有相同、一致的结果。根据 caniemail.com 的说法，将 background 属性用于添加颜色以外的任何其他内容可能会导致您的颜色不显示。

bgcolor HTML 属性在 Outlook 中表现不佳，对 3 位十六进制代码的支持不一致。并且使用 RGB 和 RGBA 值会导致颜色不正确，或者颜色完全丢失。

这是我们使用 Outlook 中的各种方法进行的背景颜色测试，因此您可以亲眼看看：

石蕊测试如何在 Outlook 中的 HTML 电子邮件中呈现背景颜色 — 在 Litmus 中查看此测试 →

在其他电子邮件客户端中，3 位 HEX 代码呈现良好，但 RGB 和 RGBA 值在应用于 bgcolor HTML 属性时会导致颜色不正确。

Litmus 测试 Apple Mail 中 HTML 电子邮件中背景颜色的呈现方式 — 在 Litmus 中查看此测试 →

经过所有的测试，我们得出一个结论：坚持使用 CSS 属性，并使用 3 位或 6 位 HEX 代码或 RGB 值。这些适用于所有电子邮件客户端。

Outlook、Web.de 或 GMX.de 不支持使用 RGBA 值的 alpha 引入不透明度，但在其他方面有不错的支持。

所以你的最终代码应该看起来像这样来为表格的整个背景着色：

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #427CA9;">

或为特定表格单元格添加颜色：

<td style="background-color: #427CA9;">

就是这样！

QA 测试您的电子邮件的背景颜色等

你做对了吗？查看您的电子邮件在最流行的电子邮件客户端中的外观，这样您就可以确保品牌一致、无错误的订阅者体验。

了解如何 →

如何创建渐变背景

如果您想将背景颜色提升一个档次，请尝试添加渐变。

并非所有地方都支持 CSS 渐变，但有后备方案可以在几乎所有电子邮件客户端中呈现渐变。

电子邮件客户端支持渐变背景

电子邮件客户端	支持 CSS 线性渐变	支持 CSS 线性渐变、VML 渐变和图像回退
苹果邮件 14	✓ 是	✓ 是
Outlook 2016 (macOS 10.12.6)	✓ 是	✓ 是
Outlook 13、16、19（Windows 10）	✘ 否	✓ 是
Outlook Office 365 (Windows 10)	✘ 否	✘ 否
Outlook Office 365 (Mac OS 10.15)	✓ 是	✓ 是
Windows 10 邮件	✘ 否	✘ 否
Gmail 应用程序（Android 10）	✓ 是	✓ 是
Gmail 应用程序（iOS 13.4.1）	✓ 是	✓ 是
展望 (Android 7.0)	✘ 否	✓ 是
展望 (iOS 12.0)	✘ 否	✓ 是
三星邮件 (Android 7.0)	✓ 是	✓ 是
iPad 11 Air（第 4 代 iOS 14.2）	✓ 是	✓ 是
iPhone 12 (iOS 14.2)	✓ 是	✓ 是
AOL 邮件（边缘）	✘ 否	✓ 是
康卡斯特（边缘）	✓ 是	✓ 是
Gmail (Chrome)	✓ 是	✓ 是
办公室 365	✘ 否	✓ 是
展望网	✘ 否	✓ 是
网页版	✘ 否	✘ 否
雅虎！邮件	✘ 否	✓ 是

以下是您可以如何开始。

1. 将 CSS 线性渐变背景应用于表格或表格单元格

就像使用纯色背景一样，将 CSS 线性渐变背景应用于表格或表格单元格，或包含的 div（我们将很快深入探讨 Outlook 解决方法），以创建如下内容：

CSS 线性渐变背景的 Litmus 电子邮件示例 — 了解我们如何在 Litmus Builder 中创建此渐变

在此示例中，渐变包括三种颜色：紫色、品红色和橙色。样式从 HTML 中开始，并在 bgcolor 属性上应用了纯色后备。然后在内联 CSS 样式中，我们使用背景属性和 RGB 方法重复该回退。

为了创建线性渐变，我们再次包含背景属性并应用线性渐变样式。由于我们创建的渐变从左上角到右下角呈对角线渲染，因此我们从渐变角度语法 (315deg) 开始。然后，按照我们希望颜色出现的顺序，我们使用 RGBA 方法来声明每种颜色。

在 RGBA 颜色样式之后，包括您希望该颜色出现的位置。这将有助于将您的颜色很好地融合在一起。要了解如何选择颜色位置，您可以使用 CSS 渐变在线生成器。

你应该得到如下所示的代码：

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">

2. 使用 VML 渐变为 Outlook 创建后备

您的很多订阅者都使用 Outlook 吗？然后您需要使用矢量标记语言 (VML) 来添加背景渐变。

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="gradient" color="#e37b46" color2="#56328b" />
</v:background>
<![endif]-->

VML 渐变最适合使用两种颜色。可以选择制作三种或更多种颜色，但事实证明它看起来非常像 1990 年代初期的东西，并且您无法控制如何驯服它。如果您想要三种或更多颜色渐变，最好使用图像（我将在下一步中向您展示如何使用）。

对于基于图像的 VML 渐变，您必须调整图像大小以找出使其填充空间的最佳方法。您可以使用 type=”frame” 或 type=”tile” 属性。我发现很长的瘦渐变对于 type=”tile” 效果很好，而短的宽渐变图像对于 type=”frame” 效果更好。

查看有效方法的最佳方法是将图像放入并查看它在 Litmus 中的外观。

3. 为 Outlook、Yahoo 和 AOL 创建基于图像的后备

如果您在 Yahoo、AOL、Outlook（iOS 和 Android）和 Outlook.com 上有订阅者，您可以为他们创建基于图像的后备。

向要应用渐变的单元格或表格添加一类“渐变”。然后，使用不同的定位方法，您可以指定一个 CSS 背景图像来覆盖渐变不显示的渐变 CSS 样式。

要定位 Outlook.com，请使用以下内容：

[class~="x_gradient"] { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

要定位 Yahoo 和 AOL，请使用：

.& .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

要同时针对 Outlook 移动客户端，请使用：

body[data-outlook-cycle] .gradient { 
url('https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg') !important; 
background-size: 100% 100% !important; 
background-repeat: repeat-x !important;
}

我们为示例渐变创建了一个基于图像的回退。为了重复这一点，我们不得不告别渐变角度并安排我们的颜色从上到下显示：

基于图像的后备渐变背景的石蕊试纸电子邮件示例 — 了解我们如何在 Litmus Builder 中创建此渐变

4. 为所有其他电子邮件客户端使用纯色后备颜色

对于那些不支持任一修复的电子邮件客户端，请确保提供纯色后备颜色。

在这种情况下，使用带有 6 位十六进制颜色的 bgcolor 属性为 Windows 10 和 Office 365 桌面客户端提供后备颜色。 Web.de 将使用 CSS 背景属性作为后备。

因此，如果您想为表格的整个背景着色，在电子邮件中使用内联的最终代码是：

<table class="gradient" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
</v:background>
<![endif]-->

或者，如果您只想为特定的表格单元格着色，请使用此代码：

<td class="gradient" align="left" valign="top" bgcolor="#e37b46" style="background: rgb(227,123,70); background: linear-gradient(315deg, rgba(227,123,70,1) 3%, rgba(198,51,92,1) 44%, rgba(86,50,139,1) 85%);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:[width]px; height: [height]px;">
<v:fill type="frame" color="#e37b46" src="https://campaigns.litmus.com/_email/content-support/background-colors-blog/background-gradient1.jpeg" />
<v:textbox inset="0,0,0,0">
<![endif]-->

如果您不熟悉 VML 并想确保它是正确的，Campaign Monitor 有一个由 Stig 开发的方便的工具，用于向电子邮件添加背景图像。您可以使用相同的工具并将v:fill type=”tile”替换为v:fill type=”gradient”以创建渐变。确保使用color=""和color2=""声明开始和结束渐变颜色，并删除src=""属性。在上面的例子中，使用v:fill type="frame"来确保图像跨越整个帧并且不重复。这也是视网膜背景图像的一个很好的修复，但我们将把它留给 Courtney Fantinato。

不要忘记黑暗模式

就在背景颜色支持越来越好时，暗模式被加入了进来。

这种根据订阅者的对比偏好创建定制阅读体验的机会是可访问性的巨大胜利，但对电子邮件设计者和开发者来说却是另一个障碍。

黑暗模式电子邮件的终极指南

为暗模式优化电子邮件可能很棘手。查看我们关于编码和设计技巧的终极指南，以创建最佳的品牌暗模式电子邮件订阅者体验。

获取操作指南 →

虽然 Apple Mail、iPad、iPhone 本机邮件应用程序、HEY 和 Outlook 应用程序等电子邮件客户端可以嵌入 CSS 样式，但也有电子邮件客户端使用自己的默认呈现来提供暗模式解决方案。

Outlook.com、Office 365 以及适用于 iOS 和 Android 的 Gmail 应用程序都部分或完全反转颜色以创建深色模式体验，有时会产生可怕的结果。

目前还没有办法覆盖这种颜色反转。但是，您可以考虑一些事情来改进这些环境中的电子邮件呈现。

提示 #1：通过颜色测试做出明智的设计选择

看到您的颜色以您不希望的方式进行调整可能会令人心碎。当颜色没有改变但字体颜色会改变时，这有点令人担忧——并且您所有的可访问性考虑都被排除在外。

值得在电子邮件客户端中测试您的品牌颜色，这些客户端为深色模式反转颜色以查看它们是如何改变的。一旦您了解了颜色的渲染方式，您就可以在设计阶段做出明智的颜色选择。

我们进行了类似的测试，以查看我们无法控制的电子邮件客户端的某些颜色和色调如何变化：

暗模式下的 Litmus HTML 电子邮件背景颜色测试 — 在 Litmus 中查看此测试 →

我们发现使用浅色调会导致背景和文本颜色的反转相当好。虽然一旦反转呈现的颜色不是我们调色板的一部分，我们可以在这些电子邮件客户端中提供无障碍阅读体验。

浅色模式与深色模式下背景颜色的 Litmus HTML 电子邮件示例

提示 #2：对 Gmail 应用程序使用部分修复

由于电子邮件社区的不懈努力，在 Gmail 应用程序中驯服颜色反转的方法已经曝光。

覆盖 macOS/iOS 暗模式颜色：
对于背景颜色，使用单色渐变：
背景图像：线性渐变（#ffffff，#ffffff）
我什至不敢相信这有效，但确实如此……甚至我的按钮都是品牌的。
感谢@ThiesBW #emailgeeks
- Annett Forcier (@The_Annett) 2019 年 12 月 11 日

通过将包含背景颜色的线性渐变应用到容器元素，您可以强制您选择的颜色出现在 Gmail 的明暗模式环境中。

为此，您需要使用 HEX 颜色方法将线性渐变添加到 background-image CSS 属性。然后将渐变中的两种颜色设置为您希望 Gmail 使用的颜色，如下所示：

<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#e37b46" style="background-image: linear-gradient(#e37b46, e37b46);">

Remi Parmentier 扩展了此解决方法，以防止使用 CSS 混合模式在 Gmail 应用程序中反转文本颜色。

使用这些修复程序可以帮助您控制反向渲染的某些方面。但是，这只能在 Gmail 中实现，并且无法根据订阅者选择的对比度模式灵活地更改电子邮件的颜色。

令人沮丧的是，它无法定位反转颜色的电子邮件客户端，您可以通过以下方式重新获得一些控制：测试您的调色板，根据测试结果选择颜色，并使用这些部分修复。

哇你的订阅者的颜色

颜色是为订阅者体验增添魅力并保持电子邮件内容井井有条的好方法。它比图像花费更少的时间和资源！这是一个双赢的局面。

因此，请开始使用本指南——我们迫不及待地想在我们的收件箱中看到您的彩色背景。

确保您的颜色正确显示

订阅者是否按照您预期的方式查看您的电子邮件？使用 Litmus Email Previews 预览您的电子邮件在 90 多个电子邮件客户端、应用程序和设备中的外观。

开始免费试用 Litmus →

最初由贾斯汀·乔丹 (Justine Jordan) 于 2018 年 3 月 27 日发表。 最后更新于 2021 年 4 月 21 日。