Html Outlook 2007 中 TD 上的背景图像

background image on TD in Outlook 2007

提问by huminuh83

I've been told using tables is the best way to send emails although it's been twice as difficult. I have setup the email in tables, set all of the cells which need backgrounds with the background=""property, as well as using CSS in <style>tags saying the same thing to cover my bases. The body background shows fine in outlook, but the TD backgrounds do not. I've tried also using but that doesn't work either. I've read that Outlook 2007 doesn't support background images and won't in the future, I'm thinking there has to be a way around it?

有人告诉我，使用表格是发送电子邮件的最佳方式，尽管难度要高两倍。我已经在表格中设置了电子邮件，将所有需要背景的单元格设置为该background=""属性，并在<style>标签中使用 CSS 来说明相同的内容来覆盖我的基础。正文背景在前景中显示良好，但 TD 背景则不然。我也试过使用，但这也不起作用。我读过 Outlook 2007 不支持背景图像，将来也不支持，我想必须有办法解决它吗？

回答by lucas

This should help:

这应该有帮助：

You may have read earlier about our approach to applying a background image to an email. This involved not only adding a background image to the entire HTML page, but wrapping all content in a table with a background image applied to it. However, there was a limitation to this method, in that while you could apply a background image to the entire table, you couldn't apply one to an individual table cell. Thanks to one of our star customers, Brian Thies, we've been shown a little code that not only will allow you to add a background image to a table cell, but works in most major email clients, too...

This technique... forces a background image to display in Outlook 2003/2007/2010...

您之前可能已经阅读过我们将背景图像应用到电子邮件的方法。这不仅涉及向整个 HTML 页面添加背景图像，还涉及将所有内容包装在一个应用了背景图像的表格中。但是，此方法有一个限制，即虽然您可以将背景图像应用于整个表格，但不能将背景图像应用于单个表格单元格。感谢我们的一位明星客户Brian Thies，我们向我们展示了一些代码，它不仅可以让您向表格单元格添加背景图像，而且还可以在大多数主要电子邮件客户端中使用...

这种技术...强制在 Outlook 2003/2007/2010 中显示背景图像...

回答by Dawson

Checkout this link for supported HTML and CSS tags in Outlook 2007:

查看此链接以了解 Outlook 2007 中支持的 HTML 和 CSS 标记：

http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx

http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx

MS also offers an HTML/CSS Validation Tool for Outlook 2007 at the URL above. That may at least provide you with a method of testing.

MS 还在上面的 URL 中提供了用于 Outlook 2007 的 HTML/CSS 验证工具。这至少可以为您提供一种测试方法。

I have found that "Less Is More", when it comes to HTML emails - simple layout, simple techniques. Since each email client is going to vary, "dumbing" it down is the only way to guarantee the broadest reach.

我发现“少即是多”，当涉及到 HTML 电子邮件时 - 简单的布局，简单的技术。由于每个电子邮件客户端都会有所不同，因此“简化”它是保证最广泛影响的唯一方法。

回答by Kyle

I have made LOTS of HTML emails and have found that background images are NOT the way to go without using some hack.

我已经制作了很多 HTML 电子邮件，并且发现背景图像不是不使用一些 hack 的方法。

Always use an <img>tag in a TD for your images. If you want text on top of an image, include it into the image and repeat the text in the alt attribute of the img tag.

始终<img>在 TD 中为您的图像使用标签。如果您希望在图像顶部添加文本，请将其包含在图像中并在 img 标签的 alt 属性中重复该文本。

You can see one I have made here. It uses very little CSS and img tags, plus it renders perfectly in almost all Email clients.

你可以在这里看到我做的一个。它使用很少的 CSS 和 img 标签，而且几乎可以在所有电子邮件客户端中完美呈现。

Unfortunately with HTML emails we're a bit limited to what we can do, but there are ways around it :)

不幸的是，对于 HTML 电子邮件，我们可以做的事情有点受限，但有一些方法可以解决它:)

Hope that help :)

希望有所帮助:)

回答by w3b

Fortunately, there are formatting tweaks you can employ to address this. The upside is that making your HTML email Outlook 2007 compatible can decrease the chances that it will end up in a recipient's junk folder. The downside is that you may have to change the way in which you approach formatting parts of your emails, thereby impacting the look and feel of your creatives. Below is a list of key items to look out for, and possible alternatives that are Outlook 2007 compatible.

幸运的是，您可以使用一些格式调整来解决这个问题。好处是使您的 HTML 电子邮件与 Outlook 2007 兼容可以减少它最终出现在收件人的垃圾文件夹中的机会。不利的一面是，您可能必须改变处理电子邮件部分格式的方式，从而影响创意的外观。下面是需要注意的关键项目列表，以及与 Outlook 2007 兼容的可能替代方案。

• Background images – Background images will not display in Outlook 2007. This can leave a big, unintended void in your email. You should avoid using background images altogether. Whenever possible, you should use inline image tags instead. If you feel you must use a background image, set an appropriate background color to fill in for the potentially missing image. If you have text overlaying a background image, you can edit the image to include the text and use an image map for any links.

• Division tags – “Div” tags are not fully supported in Outlook 2007. Some of the more commonly used attributes that have been omitted are: float, clear, position, and padding. Without these attributes, positioning with div tags is virtually impossible. Instead, you should control the positioning of your email with a standard table.

• Forms – Forms are not supported in Outlook 2007. Outlook 2007 recipients will not be able to submit any forms embedded in an email. If you wish to give recipients the option to fill out a form, place a link to an online version of it within the email.

• Flash & JavaScript – It is recommended that you do not attempt to utilize Flash or Javascript on your HTML emails, due to their lack of support in email browsers (including Outlook 2007) and the fact that some filters will tag emails that contain Flash or JavaScript code. Also, most email readers will automatically disable this content as a security measure.

• Bulleted list with images – While both ordered and unordered lists are fully supported, lists that use images as bullets instead of standard bullets are not. If you need to use an image for your bullet points, one possible solution is to put your list into a two column table, using the left-hand column to place your bullets.

• Animated GIFs – Animated GIFs will not animate in Outlook 2007. The image will appear, but only the first frame of the animation will be displayed.

• Alt tags - Alt tags are also not supported. This is the text that is shown when an image does not load upon opening an email. However, most email readers do support alt tags, and there is no adverse effect to having them in your Outlook 2007 compatible email (other than the fact that they will not display,) so you can continue to include these in your emails if you wish.

• Table definitions - As we detailed above, Outlook 2007 renders HTML emails in Microsoft? Word, which is very sensitive to extra <tr>or <td>tags and does not adjust well to poorly sized tables. Previous Outlook versions would open emails in Internet Explorer, which is very forgiving of poor table definitions. You should ensure that your table definitions are correct and that the data you are placing inside the table fits properly within the defined table width.

• 背景图像 – Outlook 2007 中不会显示背景图像。这可能会在您的电子邮件中留下一个大的、意外的空白。您应该完全避免使用背景图像。只要有可能，您应该改用内嵌图像标签。如果您觉得必须使用背景图像，请设置适当的背景颜色来填充可能丢失的图像。如果您有覆盖背景图像的文本，您可以编辑图像以包含文本并为任何链接使用图像映射。

• Division 标记 – Outlook 2007 不完全支持“Div”标记。一些被省略的更常用的属性是：float、clear、position 和 padding。没有这些属性，使用 div 标签定位几乎是不可能的。相反，您应该使用标准表格来控制电子邮件的位置。

• 表单 – Outlook 2007 不支持表单。Outlook 2007 收件人将无法提交任何嵌入在电子邮件中的表单。如果您希望让收件人可以选择填写表格，请在电子邮件中放置一个指向该表格在线版本的链接。

• Flash 和 JavaScript – 建议您不要尝试在 HTML 电子邮件中使用 Flash 或 Javascript，因为它们在电子邮件浏览器（包括 Outlook 2007）中缺乏支持，并且某些过滤器会标记包含 Flash 或 JavaScript 的电子邮件代码。此外，作为安全措施，大多数电子邮件阅读器会自动禁用此内容。

• 带图像的项目符号列表 - 虽然完全支持有序和无序列表，但不支持使用图像作为项目符号而不是标准项目符号的列表。如果您需要为项目符号使用图像，一种可能的解决方案是将列表放入两列表格中，使用左侧列放置项目符号。

• 动画 GIF - 动画 GIF 在 Outlook 2007 中不会有动画效果。图像会出现，但只会显示动画的第一帧。

• Alt 标签 - 也不支持 Alt 标签。这是在打开电子邮件时未加载图像时显示的文本。但是，大多数电子邮件阅读器确实支持 alt 标签，并且在您的 Outlook 2007 兼容电子邮件中使用它们没有不利影响（除了它们不会显示的事实），因此您可以根据需要继续将这些包含在您的电子邮件中.

• 表定义 - 正如我们上面详述的，Outlook 2007 在 Microsoft 中呈现 HTML 电子邮件？Word，它对 extra<tr>或<td>tags非常敏感，并且不能很好地适应大小不合适的表格。以前的 Outlook 版本会在 Internet Explorer 中打开电子邮件，这对糟糕的表定义非常宽容。您应该确保您的表格定义是正确的，并且您放置在表格中的数据在定义的表格宽度范围内合适。

回答by Java Student

You could do this, inside <td> where you want bg image place another tableand do this .

你可以这样做，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>

this will cover whole and it works perfectly in outlook

这将涵盖整个范围，并且在 Outlook 中完美运行

回答by John Magnolia

This worked for me:

这对我有用：

<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>

Source: https://www.campaignmonitor.com/forums/topic/3862/please-test-this-outlook-20072010-background-image-solution/

来源：https: //www.campaignmonitor.com/forums/topic/3862/please-test-this-outlook-20072010-background-image-solution/

回答by davidcondrey

Full width table cell background images

全宽表格单元格背景图像

<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>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2

• 在 OSX 10.9.2 上通过 Windows 7 VMWare 在 Outlook 2010 中测试

---

---

Tiled full width table cell background images

平铺全宽表格单元格背景图像

    <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>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2

• 在 OSX 10.9.2 上通过 Windows 7 VMWare 在 Outlook 2010 中测试

---

---

Specified width table cell background images

指定宽度表格单元格背景图片

Here is an example, two rows, the first row has 3 columns with 3 separate background images, the second row spans all the way across as one background image.

这是一个例子，两行，第一行有 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>

• Tested in Outlook 2010 thru Windows 7 VMWare on OSX 10.9.2

• 在 OSX 10.9.2 上通过 Windows 7 VMWare 在 Outlook 2010 中测试