电子邮件背景图片
Posted
技术标签:
【中文标题】电子邮件背景图片【英文标题】：Email background image 【发布时间】：2017-06-14 02:40:19 【问题描述】：我想为邮件添加背景图片。当我在 MailChimp 上测试时，预览效果很好（内联样式和缩小）。
但如果我对我的邮件（Gmail APP 和 Outlook）进行测试，我没有背景。如果我在浏览器中打开邮件，我的背景会显示出来。
我已经对此进行了测试：
background="http://domaine.com/myimage.jpg"
和
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
没有结果。有人知道吗？
【问题讨论】：
【参考方案1】：经过 1.5 年的血汗和泪水，我的电子邮件背景代码：
重要的是要知道这段代码中的几乎所有内容都很重要！从 DOCTYPE、html 标记的 xml 属性、头部的条件 cmets 和 css，... 只需将此作为您下一封电子邮件的起点。
重要提示：
在 td 上使用 attr background="" ，而不是在表格或任何其他元素上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word">
<head>
<!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>10 well-formed<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>conditional comments<!-- --><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="mytitle" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<style type="text/css">
v\:*
behavior: url(#default#VML);
display: inline-block
o\:*
behavior: url(#default#VML);
display: inline-block
w\:*
behavior: url(#default#VML);
display: inline-block
.ExternalClass
width:100%;
table
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
img
-ms-interpolation-mode:bicubic;
.ReadMsgBody
width:100%;
</style>
</head>
<body bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" valign="top" style="background-color:#cccccc;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000;height:1000px;">
<v:fill type="tile" src="https://i.stack.imgur.com/LCCB6.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<br /><br />
<div>
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center" valign="top" >
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" >
<tr>
<td align="center" bgcolor="white">
Content of your email goes here, for widths try to use % procent from now if possible. Start again here with a table
<br />
For outlook you need v:rect code and fixed height set in pixels!<br /><br />
If you just want a block inside this 600px wrapper with a background you do it like this:<br>
<table border="0" cellpadding="0" cellspacing="0" style="max-width:100%;" >
<tr>
<td align="center" background="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" bgcolor="#000000" style="color:#fefefe;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;">
<v:fill type="tile" src="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content goes here, for widths try to use % procent from now if possible. (except in v:rect code, use px there) For outlook you need v:rect code and fixed height set in pixels!<br><br>
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;<br>
<br /><br /><br />
<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
【讨论】：
【参考方案2】：CSS 背景不适用于电子邮件。请改用 HTML background 属性。例如：
<table background="image.jpg"...
【讨论】：
【参考方案3】：这是我现在一直在使用的代码示例。
<!--[if (gte mso 9)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" >
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px;">
<tr>
<td align="center" background="[IMAGE PATH]" bgcolor="#000000" style="height:400px;color:#fefefe; background-image: url('[IMAGE PATH]'); background: url('[IMAGE PATH]');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="[IMAGE PATH]" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content here<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
上面的例子是一个混合代码。我在 TD 的样式标记中添加了另外两个背景图像路径，它们应该适合 Lotus notes（或旧电子邮件客户端）和 Gmail。
告诉我你的情况。
【讨论】：
我体验到用大写字母写 IE 在 Outlook.com 实时客户端上不起作用，所以这就是为什么我会这样写 【参考方案4】：虽然我们应用的背景图像最多可以显示电子邮件客户端，但特别是不会在 Outlook 上显示。所以为了在 Outlook 中显示邮件背景 您可以使用下面给出的代码 sn-p，这将使 bg 图像在 Outlook 中可见。
只需选择你想要背景图片所在的Td，然后将下面的代码粘贴到那里并更新背景图片路径。
<td background="your_background_image_path_here">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block; width: 600px; height: 100%;"
src="your_background_image_path_here" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block;position: absolute; width: 600px;
height: 297px;">
<v:fill opacity="0%" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>
Rest Your Emailer Code Goes Here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
【讨论】：
以上是关于电子邮件背景图片的主要内容，如果未能解决你的问题，请参考以下文章