Outlook 2007中TD上的背景图片
我被告知使用表格是发送电子邮件的最佳方式，尽管它的难度是两倍。我已经在表格中设置了电子邮件，设置了所有需要具有background=""属性背景的单元格，以及在<style>标签中使用CSS来说明同样的事情来覆盖我的基础。身体背景显示前景很好，但TD背景却没有。我也试过使用，但这也不起作用。我已经读过Outlook 2007不支持背景图像，将来也不会，我认为必须有办法解决它？
7 个答案:
答案 0 :(得分：16)
您之前可能已经阅读了applying a background image to an email的方法。这不仅涉及向整个HTML页面添加背景图像，还包括将所有内容包装在应用了背景图像的表格中。但是，此方法存在限制，因为您可以将背景图像应用于整个表格，但无法将其应用于单个表格单元格。感谢我们的一位明星客户Brian Thies，我们已经展示了一些代码，不仅可以让您add a background image to a table cell，还可以在大多数主要的电子邮件客户端中使用...
此技术...强制在Outlook 2003/2007/2010 ...
中显示背景图像
答案 1 :(得分：5)
在Outlook 2007中查看此链接以获取支持的HTML和CSS标记：
http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx
MS还在上面的URL中为Outlook 2007提供了HTML / CSS验证工具。这至少可以为您提供一种测试方法。
在HTML电子邮件方面，我发现“少即是多” - 简单的布局，简单的技术。由于每个电子邮件客户端都会发生变化，因此“疏忽”它是确保最广泛覆盖范围的唯一方法。
答案 2 :(得分：1)
我已经制作了很多HTML电子邮件，并且发现背景图片不是不使用某些黑客的方式。
始终在TD中使用<img>标记作为图片。如果您想在图像顶部显示文本，请将其包含在图像中并重复img标记的alt属性中的文本。
您可以看到一个I have made here。它使用非常少的CSS和img标签，而且它几乎可以在所有电子邮件客户端中呈现。
不幸的是，对于HTML电子邮件，我们可以做的事情有限，但有很多方法可以解决它：）
希望有所帮助：）
答案 3 :(得分：1)
幸运的是，您可以使用格式调整来解决此问题。好处是使您的HTML电子邮件与Outlook 2007兼容可以降低它最终进入收件人垃圾文件夹的可能性。缺点是您可能需要更改格式化电子邮件部分的方式，从而影响广告素材的外观。以下是需要注意的关键项目列表，以及与Outlook 2007兼容的可能替代方案。
-
背景图片 - 背景图片不会显示在Outlook 2007中。这会在您的电子邮件中留下一个很大的，无意的空白。您应该完全避免使用背景图像。只要有可能，您应该使用内联图像标记。如果您觉得必须使用背景图像，请设置适当的背景颜色以填入可能缺失的图像。如果文本覆盖背景图像，则可以编辑图像以包含文本，并使用图像映射来显示任何链接。
-
分区标记 - Outlook 2007中不完全支持“Div”标记。一些被忽略的常用属性是：float，clear，position和padding。没有这些属性，使用div标签进行定位几乎是不可能的。相反，您应该使用标准表控制电子邮件的位置。
-
表单 - Outlook 2007不支持表单.Outlook 2007收件人将无法提交电子邮件中嵌入的任何表单。如果您希望为收件人提供填写表格的选项，请在电子邮件中放置指向其在线版本的链接。
-
Flash＆amp; JavaScript - 建议您不要在HTML电子邮件中使用Flash或Javascript，因为它们在电子邮件浏览器（包括Outlook 2007）中缺乏支持，并且某些过滤器会标记包含Flash或JavaScript代码的电子邮件。此外，大多数电子邮件阅读器会自动禁用此内容作为安全措施。
-
带图像的项目符号列表 - 虽然完全支持有序和无序列表，但是使用图像作为项目符号而不是标准项目符号的列表则不是。如果您需要使用图像作为要点，一种可能的解决方案是将列表放入两列表中，使用左侧列放置子弹。
-
动画GIF - 动画GIF不会在Outlook 2007中设置动画。图像将会显示，但只会显示动画的第一帧。
-
Alt标记 - 也不支持Alt标记。这是在打开电子邮件时未加载图像时显示的文本。但是，大多数电子邮件阅读器都支持alt标签，并且在Outlook 2007兼容电子邮件中使用它们没有任何不利影响（除了它们不会显示的事实之外），因此如果您愿意，可以继续将这些包含在您的电子邮件中
-
表定义 - 如上所述，Outlook 2007在Microsoft®Word中呈现HTML电子邮件，该电子邮件对额外的
<tr>或<td>标记非常敏感，并且无法很好地适应不合适的大小表。以前的Outlook版本会在Internet Explorer中打开电子邮件，这对于糟糕的表定义非常宽容。您应确保您的表定义正确，并且您放置在表中的数据是否适合在定义的表宽度内。
答案 4 :(得分：1)
您可以执行此操作，inside <td> where you want bg image place another table并执行此操作。
<td> < !-- this is table where you want to set bg image -->
< table background="myimg.jpg" style="background-repeat:no-repeat;" >
here goes content
</table>
</td>
这将涵盖整体，它在outlook中完美运作
答案 5 :(得分：0)
这对我有用：
<td background="http://www.thiespublishing.com/oneimage.gif" height="402" width="600" bgcolor="#cccccc">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
答案 6 :(得分：0)
全宽表格单元格背景图像
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- 在OSX 10.9.2上通过Windows 7 VMWare在Outlook 2010中测试
平铺全宽表格单元格背景图像
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
- 在OSX 10.9.2上通过Windows 7 VMWare在Outlook 2010中测试
指定的宽度表格单元格背景图像
这是一个例子，两行，第一行有3列，有3个单独的背景图像，第二行一直跨越作为一个背景图像。
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
- 在OSX 10.9.2上通过Windows 7 VMWare在Outlook 2010中测试
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？