如何使用电子邮件背景图像轻松地让每个订阅者惊叹（+ 执行此操作的代码！）

已发表: 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 中实现此功能

先进技术

对比图像交换

互动背景

升级你的设计

什么是背景图片？（还有什么意义？）