我在Outlook 2007/2010/2013中的背景图片有问题。
代码:
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td background="http://i.imgur.com/YJOX1PC.png" bgcolor="" width="500" height="150" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%;height:150px">
<v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" align="center" cellspacing="0" border="0" height="100%" width="100%">
<tr>
<td bgcolor="" valign="top" align="center">
<img width="320" style="width: 100%; max-width: 320px;height: auto;" src="https://7maravilhas.pt/wp-content/uploads/2015/11/turismo-2.png">
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
我已经尝试过everithyng(高度,宽度,任何类型的代码)无效。
感谢您的帮助
答案 0 :(得分:0)
您可以尝试以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>
有关更多信息,请参考以下链接:
答案 1 :(得分:0)
确保已在
中声明了此内容<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
我将此用于我的VML。它与您的相似,但我使用<!--[if gte mso]>
而不是<!--[if gte mso 9]>
尝试一下:
<!--[if gte mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 640px"> <v:fill type="frame"
src="http://i.imgur.com/YJOX1PC.png"
color="#7bceeb"
/> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]-->
<div>
</div>
<!--[if gte mso]><p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p> </v:textbox> </v:rect> <![endif]-->
</td>
</tr>
</table>
答案 2 :(得分:0)
重要的事情是:
使用此模板作为起点:
<!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>
答案 3 :(得分:-1)
随着Outlook 2007的推出和许多基于Web的电子邮件客户端,对背景图像的支持已基本删除。如果您知道您的联系人仅使用仍在渲染背景图像的电子邮件客户端,那么就去吧;但一般来说,请避免使用背景图片(使用CSS调用背景图片也不起作用。)