Html 背景图像Don';在Outlook 2013中没有显示
我对Outlook 2007/2010/2013中的背景图像有问题 代码:Html 背景图像Don';在Outlook 2013中没有显示,html,css,email,outlook,vml,Html,Css,Email,Outlook,Vml,我对Outlook 2007/2010/2013中的背景图像有问题 代码: 随着Outlook 2007的推出和许多基于web的电子邮件客户端的出现,对背景图像的支持基本上已经取消。如果你知道你的联系人只使用仍然呈现背景图像的电子邮件客户端,那就去吧;但是作为一般规则,避免使用背景图像(使用CSS调用背景图像也不起作用)。您可以尝试在td的样式中添加背景图像,如下所示: <table cellpadding="0" cellspacing="0" border="0" width="
随着Outlook 2007的推出和许多基于web的电子邮件客户端的出现,对背景图像的支持基本上已经取消。如果你知道你的联系人只使用仍然呈现背景图像的电子邮件客户端,那就去吧;但是作为一般规则,避免使用背景图像(使用CSS调用背景图像也不起作用)。您可以尝试在td的样式中添加背景图像,如下所示:
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td background="http://i.imgur.com/YJOX1PC.png" border="0" cellpadding="0" cellspacing="0" height="150" width="500" style="background-image:url(http://i.imgur.com/YJOX1PC.png)" bgcolor="" width="600" height="325" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:325px;">
<v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" border="0" cellpadding="0" cellspacing="0" height="150" width="500" style="background-image:url(http://i.imgur.com/YJOX1PC.png)" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" height="100%" align="center" border="0" cellspacing="0" cellpadding="0">
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
有关更多信息,请参考以下链接:
请确保在您的
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
我把它用于我的VML。它与您的类似,但我使用
重要的是:
- 您使用的是.png,因此必须声明允许在Outlook中使用“AllowPNG”
- 在DOCTYPE和html中,需要对VML进行一些额外的设置
- 一些额外的css可以方便地重置vml元素(css中的东西,如v:*…)
<!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 conditional<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>wellformed 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="The title" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width">
<title>The title</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%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table{
border-spacing: 0;
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
height: auto;
}
.ReadMsgBody{
width:100%;
}
td {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse !important;
}
p
{
margin: 0 0 20px 0;
Margin: 0 0 20px 0;
margin-bottom: 20px;
Margin-bottom: 20px;
}
@media only screen and (max-width: 600px) {
.content-wrapper{
width: 100% !important;
max-width: 100% !important;
}
.gmail-fix {
width: 0 !important;
display: none !important;
}
}
/* NO NORMAL CSS BETWEEN OR AFTER MEDIA QUERIES! they all get stripped in gmail */
</style>
</head>
<body width="100%" style="margin:0; Margin: 0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin:0; Margin: 0; padding:0;">
<!-- GMAIL fix, keep min 600px when no media queries supported and keep this on top of email -->
<tr class="gmail-fix">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0" width="600" style="font-size: 0; line-height: 0; width: 600px; min-width: 600px; height: 0;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="100%" valign="top">
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" class="content-wrapper" style="max-width:600px;">
<tr>
<td align="center">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td valign="top" background="http://i.imgur.com/YJOX1PC.png" style="background-repeat: repeat;">
<!--[if gte mso 9]>
<div>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height:225px;">
<v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" height="150">
Your content or a non-breaking-space if you leave td's empty
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
</div>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
标题
v\:*{
行为:url(#默认值#VML);
显示:内联块
}
o\:*{
行为:url(#默认值#VML);
显示:内联块
}
w\:*{
行为:url(#默认值#VML);
显示:内联块
}
.外部类{
宽度:100%;
}
.外部类,
.外部类别p,
.ExternalClass span,
.ExternalClass字体,
.ExternalClass td,
.ExternalClass分区{
线高:100%;
}
身体{
宽度:100%!重要;
最小宽度:100%;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
保证金:0;
保证金:0;
填充:0;
-moz框大小:边框框;
-webkit框大小:边框框;
框大小:边框框;
}
桌子{
边界间距:0;
边界塌陷:塌陷;
mso表空间:0pt;
mso表rspace:0pt;
}
img{
大纲:无;
文字装饰:无;
-ms插值方式:双三次插值;
宽度:自动;
最大宽度:100%;
高度:自动;
}
.ReadMsgBody{
宽度:100%;
}
运输署{
-webkit连字符:自动;
-moz连字符:自动;
连字符:自动;
边界崩溃:崩溃!重要;
}
P
{
利润率:0.20px0;
利润率:0.20px0;
边缘底部:20px;
边缘底部:20px;
}
@仅介质屏幕和(最大宽度:600px){
.内容包装器{
宽度:100%!重要;
最大宽度:100%!重要;
}
.gmail补丁{
宽度:0!重要;
显示:无!重要;
}
}
/*在媒体查询之间或之后没有正常的CSS!他们都在gmail里脱光了衣服*/
如果td为空,您的内容或非中断空间
谢谢,那我该怎么做呢这可能会有所帮助。
<!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 conditional<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>wellformed 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="The title" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width">
<title>The title</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%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table{
border-spacing: 0;
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
height: auto;
}
.ReadMsgBody{
width:100%;
}
td {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse !important;
}
p
{
margin: 0 0 20px 0;
Margin: 0 0 20px 0;
margin-bottom: 20px;
Margin-bottom: 20px;
}
@media only screen and (max-width: 600px) {
.content-wrapper{
width: 100% !important;
max-width: 100% !important;
}
.gmail-fix {
width: 0 !important;
display: none !important;
}
}
/* NO NORMAL CSS BETWEEN OR AFTER MEDIA QUERIES! they all get stripped in gmail */
</style>
</head>
<body width="100%" style="margin:0; Margin: 0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="margin:0; Margin: 0; padding:0;">
<!-- GMAIL fix, keep min 600px when no media queries supported and keep this on top of email -->
<tr class="gmail-fix">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="0" width="600" style="font-size: 0; line-height: 0; width: 600px; min-width: 600px; height: 0;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" width="100%" valign="top">
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" class="content-wrapper" style="max-width:600px;">
<tr>
<td align="center">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;">
<tr>
<td valign="top" background="http://i.imgur.com/YJOX1PC.png" style="background-repeat: repeat;">
<!--[if gte mso 9]>
<div>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height:225px;">
<v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" height="150">
Your content or a non-breaking-space if you leave td's empty
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
</div>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>