我想将背景图片添加到邮件电子邮件中。当我在MailChimp上测试时，预览很好（内联样式并缩小）。
但是，如果我在我的邮件（Gmail APP和Outlook）上运行测试，我没有背景。如果我在浏览器中打开邮件，我的背景就是显示。
我用这个来测试：
background="http://domaine.com/myimage.jpg"
和
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
没有结果。有人有想法吗？
答案 0 :(得分：0)
CSS背景在电子邮件无处不在。请改用HTML background属性。 E.g：
<table background="image.jpg"...
答案 1 :(得分：0)
我的代码是经过1.5年的血，汗和泪的电子邮件背景：
<!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<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>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 width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" width="100%" height="1000" 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" width="600" height="100%">
<tr>
<td align="center" valign="top" width="600" height="100%">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" height="100%">
<tr>
<td align="center" height="100%" 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" width="100%" style="max-width:100%;" height="300">
<tr>
<td align="center" height="300" 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 :(得分：0)
以下是我现在用于安静的代码示例。
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width:600px;">
<tr>
<td align="center" height="400" 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笔记（或旧版电子邮件客户端）和Gmail。
让我知道你怎么走。