如何使用電子郵件背景圖像輕鬆地讓每個訂閱者驚嘆（+ 執行此操作的代碼！）

已發表: 2021-07-23

電子郵件可以通過這裡的圖像，那裡的文本塊感覺有點可預測......一種使訂閱者體驗活躍的方法？背景圖片。它們出人意料，為您的設計增添了另一個維度，讓您的電子郵件“流行”。如果做得好，它們會讓您的電子郵件感覺像一百萬美元，但非常容易實現。

繼續閱讀：

背景圖片的好處
鼓舞人心的電子郵件示例
設計注意事項
如何編碼背景圖像

什麼是背景圖片？（還有什麼意義？）

背景圖像是應用於元素背景或背後的圖像。它們不像英雄形像那樣成為電子郵件的主要焦點，它們通常更微妙，並與廣告系列中的其他內容相輔相成。

使用背景圖像的主要好處是它們允許您在它們之上放置額外的 HTML 內容。與其他圖像不同，在該空間中只能存在圖像本身，背景圖像提供了分層的可能性，因此您可以在同一空間中存在額外的圖像、文本或號召性用語 (CTA)。

實時 HTML 文本和背景圖像上的防彈按鈕示例

在背景圖像上使用實時 HTML 文本，而不是將該文本作為圖像的一部分包含在內，這意味著當圖像關閉時您的消息是可讀的，這使其成為創建更好、更易於訪問的 HTML 電子郵件的絕佳技術。

除了幫助創建提供更好閱讀體驗的活動外，背景圖片還提供了豐富的設計可能性，使您的活動在競爭中脫穎而出。

品牌使用背景圖片的創意方式

Miro在他們的英雄部分後面放置了一個包含形狀的背景圖像，以引起人們對電子郵件的主要標題和消息的注意，這些消息使用實時文本覆蓋。

Uplers使用背景圖片來突出他們服務的折扣，在優惠券代碼後面放一張優惠券圖片。

Figma在這封電子郵件的正文中添加了一個微妙的重複背景圖案，向我們介紹了他們的新白板產品。 它們的特色圖案與產品中的背景相呼應。

電子郵件中的 Figma 背景圖片 — 在 Litmus Builder 中查看此電子郵件

Chipotle在這個有影響力的巨型英雄和身體區域後面放置了一張巨型背景圖片，包括產品攝影和線條圖案。 在這張圖片的頂部，它們有一個帶有透明背景的動畫 GIF，以及身體區域中的實時文本。

帶有微妙背景圖像的 Chipotle Friendsgiving 電子郵件 — 來源：非常好的電子郵件

動畫 GIF 也可以用作背景圖像，就像這個來自Adobe Stock 的例子，用英雄內容推廣節日收藏，包括實時文本和放置在動畫背景頂部的 CTA 按鈕。

帶有動畫 GIF 背景圖像的 Adobe Stock 電子郵件 — 來源：非常好的電子郵件

設計注意事項

在考慮實現背景圖像時，有一些設計考慮值得考慮。

對比

為確保所有讀者都能獲得疊加在背景圖像上的內容的價值，重要的是要注意對比。以與處理平面顏色大致相同的方式處理圖像，並根據內容的顏色測試圖像中的顏色。

如果您使用 Figma 進行設計，則可以添加色盲和對比度等插件，以查看您是否符合 Web 內容可訪問性指南 (WCAG)。還有許多網絡應用程序，例如 WebAim 的 Contrast Checker，您可以在其中測試設計中的顏色。

簡單

確保可讀性的另一種方法是保持簡單。繁忙的背景會使您難以獲得放置在圖像上的任何實時文本的價值。因此，將背景圖像視為增強功能而不是功能通常會有所幫助。

純色後備

由於並非所有電子郵件客戶端都支持背景圖像，因此請設計純色後備。使用不支持您的圖像的電子郵件客戶端的訂閱者仍然可以使用純色獲得出色的體驗。請務必選擇與您的設計相匹配並與其前景元素形成鮮明對比的後備顏色。

如何在電子郵件中編碼背景圖像

在我瀏覽代碼之前，讓我們看看哪些客戶端將呈現背景 CSS 樣式，哪些需要 VML 回退的幫助。

好消息：對內聯背景 CSS 的支持得到了改進，Webmail 客戶端現在完全支持這種方法，這意味著不再需要背景 HTML 屬性。

壞消息：不幸的是，Windows 10 Mail 不喜歡背景圖像。它不會呈現內聯 CSS 或已棄用的 HTML 背景屬性。並且應用 VML 會導致渲染問題，並顯示“無法顯示圖像”錯誤消息。

如果您擔心 Windows 10 郵件訂閱者獲得的體驗，請考慮忽略 VML。這可確保後備背景顏色為您的 Microsoft Outlook 套件受眾提供出色的電子郵件閱讀體驗，而無需額外裝飾。

電子郵件背景圖像在 Windows 10 郵件中的外觀

電子郵件客戶端支持背景圖像

電子郵件客戶端	使用內聯 CSS	使用 VML
蘋果郵件 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Outlook 2013、2016、2019（Windows 10）	✘	✓
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	✓	✘
展望網	✓	✘
雅虎！郵件	✓	✘

您的訂閱者使用哪些電子郵件客戶端？

使用 Litmus 電子郵件分析查看您自己的電子郵件客戶端市場份額。查看您需要為哪些電子郵件客戶端優化背景圖像。（提示：如果 Windows 10 郵件很低，請不要擔心。）

了解更多 →

現在我們已經解決了這個問題，讓我們談談代碼！

將背景圖像帶入電子郵件的有趣之處之一是，您可以通過幾種不同的方式來實現這一點。您可以填充一小部分或覆蓋電子郵件的正文，使用單個圖像或重複模式，並且您可以根據您的閱讀器是在桌面、移動、淺色模式、深色模式，甚至何時切換背景圖像它們懸停或滾動到您的圖像上。

每種技術都需要不同的方法，所以讓我們來看看編寫這些代碼的最佳方法。

寬度定義或固定的背景圖像

固定寬度背景

應用背景圖像時，最好將代碼添加到包含表的單元格中。應用於任何其他 HTML 元素，例如 <table> 或 <body> 不太可能獲得某些電子郵件客戶端的支持。這應該是這樣的：

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

在這裡，圖像通過在內聯 CSS 樣式中包含 background-size:cover 來適應單元格的寬度和高度，然後定位到中心。添加這些樣式允許您使用 2x 圖像——這意味著您將在視網膜顯示器上看到清晰的渲染——並且它會被調整大小以整齊地適應您的容器，即使容器調整大小以在不同設備上進行渲染。

但是，這也意味著如果您的圖像太小或與容器不成比例，它可能看起來像素化或拉伸。特別是如果是攝影。

你的背景圖片有用嗎？

了解我們的背景圖片代碼如何在您自己的電子郵件中通過 Gmail 和 Outlook 等最流行的電子郵件應用程序運行。

了解更多 →

今天，大多數電子郵件客戶端都支持內聯 CSS 背景樣式，因此您可以使用背景速記 CSS 屬性添加背景圖像和後備顏色。換句話說，只需將這些應用於“背景”樣式。不幸的是，在進行內聯編碼時，進一步的背景樣式對於速記不太適用，因此任何定位或大小調整都需要作為單獨的樣式編寫。例如，使用背景位置：中心；背景尺寸：80%；代替背景：中心/80%； .

使用 VML 回退在 Outlook 中實現此功能

Outlook 和 Office 365 桌面版也需要一點幫助來顯示背景圖像，因為它們也不會呈現 CSS 背景樣式。為了讓我們的背景圖像在這些電子郵件客戶端中顯示，我們需要利用 Stig Morten Myre 為活動監視器推廣的技術，並應用 Microsoft 的矢量標記語言 (VML)。

使用我們已經創建的代碼，我們將所需的 VML 和一個包含 <div> 放在我們的表格單元格中：

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

對於需要填充容器而不重複的圖像，我們需要在 vml:fill 標籤中使用“frame”。這樣，您就可以在此標籤中使用 2x 圖像。只需確保在 v:rect 標籤上使用內聯樣式設置容器的寬度（在上面的示例中，它設置為 600px）。

如果您想在容器上填充，您可能會發現將 VML 放置在容器內會使填充折疊。我們解決這個問題的方法是將 VML 包裹在我們的容器周圍，因此我們需要將我們的容器嵌套在另一個表中，如下所示：

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

重複背景圖片

您還可以添加在您放置的容器內重複的背景。一個很好的例子是在整個電子郵件正文中重複一個模式。

重複背景圖像的例子

如果我們放置在容器單元格中的圖像小於容器，它將自動在水平和垂直方向重複。要僅在一個方向重複，請使用 'background-repeat' CSS 設置樣式並添加值 repeat-x 以進行水平重複，或添加值 repeat-y 以進行垂直重複。

要使用完全重複的模式填充整個容器，代碼非常簡單：

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

使用 VML 回退在 Outlook 中實現此功能

同樣，如果您想在 Outlook 客戶端中看到您的背景呈現，您可以應用 VML。這次的代碼有點不同，VML 放在容器之前：

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

要使背景重複，請使用類型 'tile' 填充 v:fill 標籤。毫不奇怪，Windows 10 Mail 存在一些渲染問題，並且由於背景重複，渲染問題可能更加難看。因此，如果您有任何 Windows 10 郵件訂閱者，則省略 VML 可能是最安全的方法。

先進技術

固定和重複的背景圖像提供了很多機會來升級您的電子郵件設計，但還有更多：

對比圖像交換

既然深色模式可用於多個電子郵件客戶端——並且尊重訂閱者的偏好有助於你接觸更廣泛的受眾並建立信任——切換背景圖像是補充淺色或深色模式設計的好方法。這也是一個有趣而簡單的增強。

對比模式

要實現這一點，您需要向暗模式媒體查詢添加一些嵌入式 CSS。這將確保您的暗模式背景圖像在支持此類媒體查詢的電子郵件客戶端中提供：

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

值得添加一個深色的後備顏色。這將有助於電子郵件客戶端在沒有讀者採取行動的情況下不會加載圖像，並確保在您的圖像尚未加載時可以閱讀您的消息。

現在，在您的 HTML 中，將您的類應用於包含您的淺色模式背景圖像的單元格。簡單的！

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

請注意：難以設計甚至更難編碼的是電子郵件客戶端，它們在暗模式環境中反轉電子郵件的顏色，完全忽略了您為編寫暗模式媒體查詢所做的所有辛勤工作。

獲得這些電子郵件客戶端幾乎是不可能的。但是，您可以使用具有一定透明度的背景圖像，並將高對比度背景顏色應用到您的容器，例如淺色模式下的白色和深色模式下的黑色。這將允許反轉背景顏色。我在下一個例子中嘗試了這個：

不同暗模式場景下的電子郵件背景圖片

我的 V 形背景圖像在箭頭上的不透明度為 30%，並且它們之間完全透明。這意味著當冒犯的電子郵件客戶端控制我的暗模式渲染時，內容是可讀的。

有關暗模式編碼和電子郵件客戶端支持的更多信息，請查看我們的暗模式電子郵件終極指南。

互動背景

如何通過一些交互來取悅訂閱者？您可以通過簡單的懸停或鼠標懸停效果傳播一點快樂，當讀者將光標移到您的內容上時改變容器的背景。

電子郵件背景圖像在懸停或鼠標懸停時切換

您需要一點嵌入式 CSS 才能使這個工作正常進行。把它放在你的 <style> 標籤中：

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

現在您需要做的就是將這個類應用到您的表格單元格，如下所示：

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

升級你的設計

憑藉豐富的機會，使用背景圖像來增強您的電子郵件設計是突破極限並使您的電子郵件在人群中脫穎而出的好方法。為了幫助您將這些技術付諸實踐，我們創建了一個方便的資源，您可以在其中獲取本文中的代碼。

我們很想看看您如何在電子郵件中使用背景圖像——在下面的評論中分享您的例子。

使用 Litmus 確保您的背景圖像有效

它起作用了嗎？使用 Litmus 在 100 多個電子郵件客戶端、應用程序和設備中預覽您的背景圖像（以及電子郵件的其餘部分）。並向品牌上無錯誤的電子郵件問好。

開始免費試用 →

最初由 Jason Rodriguez 於 2019 年 5 月 24 日發表。 最後更新於 2021 年 7 月 21 日。

如何使用電子郵件背景圖像輕鬆地讓每個訂閱者驚嘆（+ 執行此操作的代碼！）

什麼是背景圖片？ （還有什麼意義？）

品牌使用背景圖片的創意方式

設計注意事項

對比

簡單

純色後備

如何在電子郵件中編碼背景圖像

寬度定義或固定的背景圖像

使用 VML 回退在 Outlook 中實現此功能

重複背景圖片

使用 VML 回退在 Outlook 中實現此功能

先進技術

對比圖像交換

互動背景

升級你的設計

什麼是背景圖片？（還有什麼意義？）