在电子邮件营销领域，设计在吸引受众注意力方面起着至关重要的作用。背景图像和图形可以有效提升您的电子邮件活动。除了外表好看之外，电子邮件背景图像还有助于传达品牌标识并创造凝聚力体验。
在本文中，我们将探讨如何将背景图像添加到电子邮件设计中，以增强总体设计。您将了解如何使电子邮件背景图像具有响应性，并确保其在上正确呈现Outlook等有问题的客户端.
为什么使用电子邮件背景图像？
在电子邮件中添加背景图像可以显著增强其视觉吸引力，因为它为独特的设计提供了更多选择。使用电子邮件背景图像有几个令人信服的原因。
- 背景图像吸引眼球，打造视觉吸引力的设计，让您的电子邮件在拥挤的收件箱中脱颖而出。
- 战略性地使用背景图像有助于 强化你的品牌形象培养接受者之间的认可和信任。他们可以帮助您的电子邮件设计与您的整体网站/营销设计更加匹配，以便用户获得即时品牌认可。
- 通过使用背景图像，您可以将注意力吸引到电子邮件的特定部分，强调关键信息或行动要求.
- 背景图像提供了创意表达画布，让您可以尝试不同的主题、风格和艺术元素，使您的电子邮件更加难忘。
电子邮件营销中的背景图像可以从精细的纹理和图案到更精细的视觉效果，例如产品图像、风景画或生活方式照片。
下面你可以看到一个微妙的背景纹理的例子，与没有背景图像的版本相比。注意CTA按钮后面的深蓝色波浪。这里的背景图像有助于增加设计的深度，因此它不仅仅是一大块蓝色阴影。当然，那纯色的蓝色背景比其他颜色要好。
防弹电子邮件背景图像
阻止图像的背景
我们在上面所做的是在图像后面编码一个纯色背景，它与设计一起工作，并在需要时显示为后备色。例如，当Outlook阻止图像时，电子邮件仍然可读。如果背景图像被屏蔽，并且背景是白色的，那么这封电子邮件中的很多内容将无法阅读。
以下是一张电子邮件背景图片的例子，该图片使用了更引人注目的生活方式摄影，为设计增添了层次感：
电子邮件背景图像上的实时文本
虽然只使用纯色块作为背景是完全可以的，但你也可以使用像这样的防弹背景来为你的设计添加一些特色。
“防弹”是什么意思？
您经常会听到电子邮件开发人员将某些元素称为“防弹的”，简单地说，一个防弹的电子邮件元素在任何电子邮件客户端上都保留其功能，而不管客户端的HTML和CSS支持级别如何。
值得注意的是，各个客户端的防弹元素在视觉上可能有所不同，但元素的功能仍然是防弹的。
当电子邮件开发人员将背景称为“防弹”时，这意味着它在每个电子邮件客户端上都很好看。防弹背景利用Outlook特定的代码在Outlook上实现背景图像，并具有漂亮的纯色后备色，这样，无论何时图像未加载，电子邮件都看起来很棒。
电子邮件客户端支持背景图像
历史上，背景图像跨电子邮件客户端的多种支持。在现代，只要编码正确，绝大多数流行的电子邮件客户端都会很好地呈现您的背景图像。
与往常一样，这方面的一个例外是Outlook。Outlook不支持传统意义上的背景图像，而是使用Outlook-specificVML代码我们也可以在Outlook上获得看起来很棒的背景图像！
值得注意的是，Windows 10 Mail不会使用这两种方法渲染背景图像，因此在使用以下技术之前，请确保使用此客户端检查您的观众数量。
如何编写HTML电子邮件背景图像
让我们详细介绍一下如何在HTML电子邮件中编写背景图像。如果您只想复制、粘贴和更改图像和颜色值，下面的代码段就可以使用了，但我们也将对其进行分解并解释其工作原理。
我们将在本节中引用此片段：
<table role=“presentation”width=“640”style=“width:640px；”cellpadding=“0”cellspacing=“O”border=“0“align=”center“><tr><td align=“center”bgcolor=“#000000”background=“https://via.placeholder.com/640x400“width=”640“height=”400“valign=”top“style=”background:url（'https://via.placeholder.com/640x400'）中心/盖无重复#000000；"><!--[如果gte mso 9]><v:image xmlns:v=“urn:schemas-microsoft-com:vml”fill=“true”stroke=“false”style=“border:0；display:inline-block；width:480pt；height:300pt；”src=“https://via.placeholder.com/640x400“/><v:rect xmlns:v=”urn:schemas-microsoft-com:vml“fill=”true“stroke=”false“style=”border:0；显示：嵌入式块；位置：绝对；宽度：480pt；高度：300pt；"><v:fill opacity=“0%”color=“#000000”/><v:textbox插入=“0,0,0,0”><![endif]--><div><div style=“font-size:0；”><table role=“presentation”width=“640”style=“width:640px；”cellpadding=“0”cellspacing=“O”border=“0“align=”center“><tr><td height=“400”align=“center”>目录</td></tr></表格></div></div><!--[如果gte mso 9]></v:textbox></v:fill></v:rect></v:image><![结尾]--></td></tr></表格>
对背景图像进行编码
我们可以将此代码分为两部分，第一部分是我们的标准背景图像代码。这就是我们如何在所有非Outlook电子邮件客户端中获得背景图像的方法：
<td align=“center”bgcolor=“#000000”background=“https://via.placeholder.com/640x400“width=”640“height=”400“valign=”top“style=”background:url（'https://via.placeholder.com/640x400'）中心/盖无重复#000000；">
这是一段非常简单的代码，我们使用CSS和HTML在TD元素上设置背景图像，我们还使用CSS将其居中，告诉客户端不要重复背景，并为未加载图像的任何实例添加后备颜色。
代码中我们告诉客户不要重复，而是使用背景大小的“cover”属性的部分可能并不总是适合您的设计。还有其他几个背景大小的属性需要考虑，例如contain。看看这个背景大小属性的细分.
使用矢量标记语言（VML）图像
现在我们已经有了用于非Outlook电子邮件客户端的标准背景图像，让我们开始分解此片段中特定于Outlook的部分。
我们在这里使用VML来实现Outlook背景图像。什么是VML？
VML公司(矢量标记语言)不是像HTML或JavaScript那样的独立编码语言。相反，它在XML框架内运行，作为一种工具，将二维矢量图形（如形状）集成到电子邮件或web设计中。然后可以根据您的偏好使用颜色、内容和其他元素自定义这些图形。
设置电子邮件时，如果要使用任何特定于Microsoft的注释或代码以及VML，则需要确保文档标题中包含正确的HTML标记，如下所示：
<html xmlns=“http://www.w3.org/1999/xhtml“xmlns:v=”urn:schemas-microsoft-com:vml“xmlns:o=”urn:schemas-mcrosoft-com:office:office“>
现在，为了添加我们的Outlook背景，我们正在使用条件码以下为：
<!--[如果gte mso 9]><v:image xmlns:v=“urn:schemas-microsoft-com:vml”fill=“true”stroke=“false”style=“border:0；display:inline-block；width:480pt；height:300pt；”src=“https://via.placeholder.com/640x400“/><v:rect xmlns:v=”urn:schemas-microsoft-com:vml“fill=”true“stroke=”false“style=”border:0；显示：嵌入式块；位置：绝对；宽度：480pt；高度：300pt；"><v:fill opacity=“0%”color=“#000000”/><v:textbox inset=“0,0,0.0”><![结尾]-->
第一部分，我们只是针对我们需要的客户，在本例中，我们的开场白是<!--[如果gte mso 9]>和的结束标记<![结尾]-->，告诉我们所包含的代码只对Microsoft Office版本或目标版本有效(mso公司)大于或等于(全球技术工程师)Outlook 2000第9版。
接下来，我们使用<v:image>标签，我们定义图像，告诉它填充空间，并设置宽度和高度。
请注意：对于VML，您需要使用PT（点）而不是Px（像素）来定义大小，但转换非常简单；只需将像素值乘以0.75：
像素到点的转换示例：640像素x 0.75=480磅
然后我们添加我们的图像源，它只是src=“链接”.
我们还在图像下方添加了一个矩形，如<v:rect>代码，它具有相同的大小维度和与我们的非Outlook特定代码匹配的回退颜色。这确保了当背景图像未加载时，我们可以控制电子邮件的样式例如，如果用户尚未单击“加载此电子邮件中的图像”按钮。
最后，您可以定义v： 文本框定位以显示您将在上面的矩形上分层附加内容(v： 矩形)和图像(v： 图像). 在这个例子中，我们定义了从左上角开始的位置"0,0,0,0".
格式化VML代码
现在，我们打开包含图像和VML的<div>。确保遵循<div style=“font-size:0；”>以停止Outlook中图像后出现的自动20px间距。
我们使用的最后一个HTML表标记是<td>，我们需要在这里使用正确的语法，或者填充<td>或开始新的<表格>添加内容。
<table role=“presentation”width=“640”style=“width:640px；”cellpadding=“0”cellspacing=“O”border=“0“align=”center“><tr><td height=“400”align=“center”>目录</td></tr></表格>
输入以上所有的结束标记，包括VML标记，结束MSO条件标记中的那些标记。
这个v： 填充和v： 图像标记是自动关闭的，因此在表之后不需要：
</div></div><!--[如果gte mso 9]></v:textbox></v:rect><![结尾]--></td></tr></表格>
虽然这段VML代码一开始可能有点让人望而却步，但在你使用了几次之后，有机会修改一些值，看看它对渲染的影响，你很快就会成为一名VML专业人士。
对响应电子邮件的背景图像进行编码
当前，此背景图像被设置为覆盖表格的640像素宽度，而表格本身并没有移动响应。如果你想提供最佳体验，你肯定需要使电子邮件背景图像具有响应性。Sinch Mailgun的电子邮件和客户体验研究发现，超过70%的消费者主要在移动设备上查看电子邮件。
为了增加响应性，我们需要向表中添加一个类和需要响应的元素（例如。class=“宽度100pc”)并在电子邮件标题中包含相应的CSS。这可以在当前媒体查询中完成，也可以在自己的媒体查询中进行，如下所示：
@媒体屏幕和（最大设备宽度：640px）、屏幕和（最高宽度：640 px）{.w100个{宽度：100%！重要；最小宽度：100%！重要；最大宽度：1000px！重要；高度：自动！重要；}}
为了使背景图像具有响应性和100%的宽度，我们将使用大众汽车测量并设置图像宽度：100伏.
通过设置class=“bgmobile”，我们可以更改背景图像在同一媒体查询中的行为。这里最有用的是使用背景图像：url（），然后可以将其切换为优化的手机图像作为背景：
.bgmobile文件{宽度：100vw！重要；背景重复：不重复！重要；背景尺寸：封面！重要；背景图片：url（mobile-image.png）！重要；}
电子邮件背景图像回退
您需要确保已经准备好了一些回退，我们在本文前面的完整背景图像片段中已经处理了这些回退。
有时您的图像根本无法加载。可能是您的收件人禁用了图像，或者他们的连接不稳定，图像无法加载。无论是哪种方式，都要确保始终有良好的背景色回退。
幸运的是，当涉及到背景图像时，我们只需要一个纯色备用。只需确保您的后备背景色提供适当的颜色对比度用文本支持good电子邮件可访问性.
不要在电子邮件背景图像上使用文本
以下是您在电子邮件活动背景中需要避免的事项：重要文本.实时文本总是一个更好的选择，应该优先考虑。
设计带有关键信息或相关信息的背景图像几乎与发送仅图像电子邮件。查看图像被阻止的活动的订阅用户将看不到该文本。这也不利于访问。这个屏幕读取软件这有助于视力受损的人阅读和处理电子邮件，只能阅读图像和文本，而不能阅读图像上的文字。然而，通常没有必要编写替代文本因为它不应该包含任何对邮件至关重要的内容。
暗模式背景注意事项
The rise in popularity of电子邮件客户端中的暗模式意味着我们在考虑背景图像时必须考虑它。
深色模式可能会给背景图像带来对比度问题，尤其是在浅色背景上从深色文本切换到浅色文本时。这种转变会影响可读性和整体用户体验。
为了帮助应对挑战，请考虑使用“暗模式图像交换“技术。此方法涉及创建图像的两个版本-一个针对暗模式优化，另一个针对亮模式优化。使用媒体查询首选颜色方案，将检测到收件人选择的主题，并显示相应的电子邮件背景图像。
在下一次大发送之前进行测试
现在你已经掌握了使用背景图像将HTML电子邮件提升到下一个级别的技能，记住任何电子邮件构建的最后一步都很重要；测试.
在电子邮件活动中运行质量保证是绝对重要的，包括本文中讨论的所有内容。您需要确保已正确添加VML，您的非Outlook背景看起来很棒，并且与背景图像没有对比度问题和/或在黑暗模式启动时的回退。
无限制来自Sinch email on Acid的电子邮件测试，你可以预览代码如何在100多个最流行的客户端和设备上呈现。在不同版本的Outlook中，在黑暗模式下，打开和关闭图像块，等等，检查电子邮件的背景和各个方面。这是确保您的团队始终发送最佳电子邮件的最有效方法。
荣誉归于我们的朋友，杰·奥拉姆，他写了这篇文章的原始版本。我们在这里重用了他的可靠电子邮件代码。你可以在上看到杰伊的作品并从他那里学到更多ActionRocket公司.
作者：Alex Ilhan
Alex Ilhan是英国的自由电子邮件专家和电子邮件开发人员，拥有为品牌和代理机构工作的经验。他还在电子邮件行业会议上就各种主题发表演讲。查找Alex在LinkedIn上连接。
