我无法在Outlook HTML简报中使用背景图像。我试过防弹方法，但它没有按预期工作！
请查看我的代码，看看您是否有任何想法如何在Outlook中正确显示3个不同的背景图像。这就是我现在所拥有的（除了Outlook之外，它在任何地方都能完美运行）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>E-mail newsletter</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
<style type="text/css">
/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }
::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}
/* Responsive */
@media only screen and (max-width:600px) {
/* Tables
parameters: width, alignment, padding */
table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }
/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }
img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }
}
</style>
</head>
<body>
<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px; padding:50px 0px 20px 0;">
Can't see the offer? Click <a href="http://webpage.com" style="color: rgb(219, 0, 19);">here</a>! </td>
</tr>
<tr>
<td>
<table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url("http://s30.postimg.org/s36pgisoh/bg1.jpg");" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
</td>
</tr>
<tr>
<td align="center">
<table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW <img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
</td>
</tr>
<tr>
<td height="50">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
</td>
</td>
</tr>
</table></tr>
</table></body></html>
</body></html>
答案 0 :(得分：1)
background-image，对不起。
点击此处了解电子邮件客户端中的css兼容性：https://www.campaignmonitor.com/css/
在电子邮件中使用html和css非常困难。 每个阅读您电子邮件的电子邮件客户端都会拥有关于如何处理HTML电子邮件的规则，因此您必须设计最低标准。