我创建了一个包含一些foreground和background图片的电子邮件模板。
除了background标记外，我得到了Outlook未接受的body张图片。
我只想为background和header
footer
是否有人有任何替代解决方案。 我花了很多时间但没有运气。
有人使用background的{{1}}张照片替换了td tag
这是Link
不幸的是，它对我不起作用可能是我做错了，因为我对HTML和CSS没有更多的了解
我已经采用了响应式模板并将其修改为我的要求
这是我的template代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="format-detection" content="telephone=no" /> <!-- disable auto telephone linking in iOS -->
<title>Respmail is a response HTML email designed to work on all major email platforms and smartphones</title>
<style type="text/css">
/* RESET STYLES */
body, #bodyTable, #bodyCell, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;font-family:Helvetica, Arial, "Lucida Grande", sans-serif;}
table{border-collapse:collapse;}
table[id=bodyTable] {width:100%!important;margin:auto;max-width:500px!important;color:#7A7A7A;font-weight:normal;}
img, a img{border:0; outline:none; text-decoration:none;height:auto; line-height:100%;}
a {text-decoration:none !important;border-bottom: 1px solid;}
h1, h2, h3, h4, h5, h6{color:#5F5F5F; font-weight:normal; font-family:Helvetica; font-size:20px; line-height:125%; text-align:Left; letter-spacing:normal;margin-top:0;margin-right:0;margin-bottom:10px;margin-left:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;}
/* CLIENT-SPECIFIC STYLES */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;display:block;outline:none; text-decoration:none;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; font-weight:normal!important;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass td[class="ecxflexibleContainerBox"] h3 {padding-top: 10px !important;} /* Force hotmail to push 2-grid sub headers down */
/* /\/\/\/\/\/\/\/\/ TEMPLATE STYLES /\/\/\/\/\/\/\/\/ */
/* ========== Page Styles ========== */
h1{display:block;font-size:26px;font-style:normal;font-weight:normal;line-height:100%;}
h2{display:block;font-size:20px;font-style:normal;font-weight:normal;line-height:120%;}
h3{display:block;font-size:17px;font-style:normal;font-weight:normal;line-height:110%;}
h4{display:block;font-size:18px;font-style:italic;font-weight:normal;line-height:100%;}
.flexibleImage{height:auto;}
.linkRemoveBorder{border-bottom:0 !important;}
table[class=flexibleContainerCellDivider] {padding-bottom:0 !important;padding-top:0 !important;}
body, #bodyTable{background-color:#E1E1E1;}
#emailHeader{background-color:#E1E1E1;}
#emailBody{background-color:#FFFFFF;}
#emailFooter{background-color:#E1E1E1;}
.textContent, .textContentLast{color:#8B8B8B; font-family:Helvetica; font-size:16px; line-height:125%; text-align:Left;}
.textContent a, .textContentLast a{color:#205478; text-decoration:underline;}
.nestedContainer{background-color:#F8F8F8; border:1px solid #CCCCCC;}
.emailButton{background-color:#205478; border-collapse:separate;}
.buttonContent{color:#FFFFFF; font-family:Helvetica; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none!important; border:0!important;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#205478; color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#205478; font-family:Helvetica, Arial, sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:20px; padding-bottom:20px; text-align:center;}
.imageContentText {margin-top: 10px;line-height:0;}
.imageContentText a {line-height:0;}
#invisibleIntroduction {display:none !important;} /* Removing the introduction text from the view */
/*FRAMEWORK HACKS & OVERRIDES */
span[class=ios-color-hack] a {color:#275100!important;text-decoration:none!important;} /* Remove all link colors in IOS (below are duplicates based on the color preference) */
span[class=ios-color-hack2] a {color:#205478!important;text-decoration:none!important;}
span[class=ios-color-hack3] a {color:#8B8B8B!important;text-decoration:none!important;}
/* A nice and clean way to target phone numbers you want clickable and avoid a mobile phone from linking other numbers that look like, but are not phone numbers. Use these two blocks of code to "unstyle" any numbers that may be linked. The second block gives you a class to apply with a span tag to the numbers you would like linked and styled.
Inspired by Campaign Monitor's article on using phone numbers in email: http://www.campaignmonitor.com/blog/post/3571/using-phone-numbers-in-html-email/.
*/
.a[href^="tel"], a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:none!important;cursor:default!important;}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {text-decoration:none!important;color:#606060!important;pointer-events:auto!important;cursor:default!important;}
/* MOBILE STYLES */
@media only screen and (max-width: 480px){
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
/* FRAMEWORK STYLES */
/*
CSS selectors are written in attribute
selector format to prevent Yahoo Mail
from rendering media query styles on
desktop.
*/
table[id="emailHeader"], table[id="emailBody"], table[id="emailFooter"], table[class="flexibleContainer"] {width:100% !important;}
td[class="flexibleContainerBox"], td[class="flexibleContainerBox"] table {display: block;width: 100%;text-align: left;}
/*
The following style rule makes any
image classed with 'flexibleImage'
fluid when the query activates.
Make sure you add an inline max-width
to those images to prevent them
from blowing out.
*/
td[class="imageContent"] img {height:auto !important; width:100% !important; max-width:100% !important;}
img[class="flexibleImage"]{height:auto !important; width:100% !important;max-width:100% !important;}
img[class="flexibleImageSmall"]{height:auto !important; width:auto !important;}
/*
Create top space for every second element in a block
*/
table[class="flexibleContainerBoxNext"]{padding-top: 10px !important;}
/*
Make buttons in the email span the
full width of their container, allowing
for left- or right-handed ease of use.
*/
table[class="emailButton"]{width:100% !important;}
td[class="buttonContent"]{padding:0 !important;}
td[class="buttonContent"] a{padding:15px !important;}
}
/* CONDITIONS FOR ANDROID DEVICES ONLY
* http://developer.android.com/guide/webapps/targeting.html
* http://pugetworks.com/2011/04/css-media-queries-for-targeting-different-mobile-devices/ ;
=====================================================*/
@media only screen and (-webkit-device-pixel-ratio:.75){
/* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
/* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
/* Put CSS for high density (hdpi) Android layouts in here */
}
/* end Android targeting */
/* CONDITIONS FOR IOS DEVICES ONLY
=====================================================*/
@media only screen and (min-device-width : 320px) and (max-device-width:568px) {
}
/* end IOS targeting */
</style>
<!--
Outlook Conditional CSS
These two style blocks target Outlook 2007 & 2010 specifically, forcing
columns into a single vertical stack as on mobile clients. This is
primarily done to avoid the 'page break bug' and is optional.
More information here:
http://templates.mailchimp.com/development/css/outlook-conditional-css
-->
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body bgcolor="#eef0f2" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center style="background-color:#eef0f2;">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="table-layout: fixed;max-width:100% !important;width: 100% !important;min-width: 100% !important;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#eef0f2;" border="0" cellpadding="0" cellspacing="0" width="500" id="emailHeader">
<!-- HEADER ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSN7rd-ot8ZAUnwwvNbeiEZiduAcGow2siJGdT-nGCbBWrv3EbN4tGdE1xk" width="800" class="flexibleImage" alt="Text" title="Logo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // END -->
</table>
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" width="800" id="emailBody">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="800" class="flexibleContainer">
<tr>
<td align="center" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<!--
The content table is the first element
that's entirely separate from the structural
framework of the email.
-->
<table border="0" cellpadding="30" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="textContent">
<h2 style="line-height:100%;font-family:Helvetica,Arial,sans-serif;font-size:34px;font-weight:normal;margin-bottom:5px;text-align:center;">An Article has been shared with you!</h2>
<h3 style="text-align:center;font-family:Helvetica,Arial,sans-serif;font-size:24px;margin-bottom:0;line-height:135%;"><span style="color:#df5d5d;">User name</span> shared:</h3>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="40" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" style="margin-top:-33px" cellpadding="5" cellspacing="0" width="600" height="222" class="flexibleContainer">
<tr style="background:#eff0f2;">
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="210" class="flexibleImage" style="max-width:100%;height:216px" alt="Text" title="Text" />
</td>
</tr>
</table>
</td>
<td align="left" valign="center" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<h3 style="color:#5F5F5F;line-height:125%;font-family:Helvetica,Arial,sans-serif;font-size:20px;font-weight:normal;margin-top:0;margin-bottom:3px;text-align:left;">Tales of travelling and working abroad</h3>
<div style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;color:#5F5F5F;line-height:135%;">www.nytimes.com</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<tr bgcolor="#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="40" cellspacing="0" width="100%">
<tr >
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="30" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td style="padding-bottom:0;" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="90" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://www.caribbeanbelleweddings.com/wp-content/uploads/2013/03/slide-circle-green.png" width="73" class="flexibleImageSmall" style="max-width:100%;" alt="Text" title="Text" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr style="background:#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="30" cellspacing="0" width="500" class="flexibleContainer">
<tr>
<td style="padding-top:0;" align="center" valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="flexibleContainer">
<tr>
<td align="left" valign="top" class="textContent">
<div style="text-align:left;font-family:Helvetica,Arial,sans-serif;font-size:15px;margin-bottom:0;margin-top:10px;color:#5F5F5F;line-height:135%;">Pellentesque habitant morbi tristique senectus netus malesuada et fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
<tr style="background:#eef0f2">
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="800" class="flexibleContainer">
<tr>
<td valign="top" width="500" class="flexibleContainerCell">
<!-- CONTENT TABLE // -->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" class="flexibleContainerBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td align="right" valign="middle" class="flexibleContainerBox">
<table class="flexibleContainerBoxNext" border="0" cellpadding="0" cellspacing="0" width="210" style="max-width:100%;">
<tr>
<td align="left" class="textContent">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRIZb29YAMj68dNKayEUfR7KMIOJD8rmf1etLqqRDfI6f0XG_3H" width="800" class="flexibleImage" alt="Text" title="Logo" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
<!-- MODULE ROW // -->
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
任何建议对我都有帮助。
答案 0 :(得分：0)
事实是Outlook使用Word来呈现邮件正文。 Word中不支持背景属性。您可以在MSDN的以下系列文章中阅读有关受支持和不受支持的HTML元素，属性和级联样式表属性的更多信息：
希望它会有所帮助。