編寫 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 日。