Css 电子邮件背景图像
我想在邮件中添加背景图像。当我在MailChimp上测试时，预览效果很好（具有内联样式和缩小） 但若我在邮件（Gmail应用程序和Outlook）上运行测试，我并没有背景。如果我在浏览器中打开邮件，将显示我的背景 我已经测试过这个：Css 电子邮件背景图像,css,email,background,responsive,Css,Email,Background,Responsive,我想在邮件中添加背景图像。当我在MailChimp上测试时，预览效果很好（具有内联样式和缩小） 但若我在邮件（Gmail应用程序和Outlook）上运行测试，我并没有背景。如果我在浏览器中打开邮件，将显示我的背景 我已经测试过这个： background=”http://domaine.com/myimage.jpg“ 及 background:url（'http://domaine.com/myimage.jpg') !重要；//内联样式 没有结果。有人知道吗？CSS背景并不适用于电子邮件。改
background=”http://domaine.com/myimage.jpg“background:url（'http://domaine.com/myimage.jpg') !重要；//内联样式没有结果。有人知道吗？CSS背景并不适用于电子邮件。改为使用HTML
background<table background="image.jpg"...
在经历了1,5年的流血、汗水和眼泪之后，我的电子邮件背景代码：
重要的是要知道，这段代码中的几乎所有内容都很重要！。从DOCTYPE、html标记的xml属性、条件注释和头部的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 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>
我的头衔
v\：*{
行为：url（#默认值#VML）；
显示：内联块
}
o\：*{
行为：url（#默认值#VML）；
显示：内联块
}
w\：*{
行为：url（#默认值#VML）；
显示：内联块
}
.外部类{
宽度：100%；
}
桌子{
边界塌陷：塌陷；
mso表空间：0pt；
mso表rspace:0pt；
}
img{
-ms插值方式：双三次插值；
}
.ReadMsgBody{
宽度：100%；
}
您的电子邮件内容放在这里，如果可能的话，从现在开始尝试使用%procent。从桌子开始
对于outlook，您需要v:rect代码和以像素为单位的固定高度设置
如果您只想在这个600px包装器中有一个块，并且有一个背景，您可以这样做：
内容放在这里，如果可能的话，从现在开始尝试使用%procent。（除了在v:rect代码中，在那里使用px）对于outlook，您需要v:rect代码和以像素为单位的固定高度设置
v:rect xmlns:v=“urn:schemas microsoft com:vml”fill=“true”stroke=“false”style=“宽度：600px；高度：1000px；
下面是一个我已经安静地使用了一段时间的代码示例
<!--[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 notes（或旧的电子邮件客户端）和Gmail
让我知道你的进展。我经历过在Outlook.com live client上用大写字母编写IE不起作用，因此我会像同意你一样编写它Julesezaar（也看到了你模板上的条件语句），Litmus上建议的一个修复程序是Outlook.com
。单是一个模板就要添加这么多修复程序，这真让人恼火。