背景图像在 Outlook 2007 及更高版本中不起作用 [英] Background images not working in Outlook 2007 and later
问题描述
我制作的 HTML 电子邮件模板在大多数电子邮件阅读器中都可以正常工作，但背景图像在 Outlook 2007、2010 和 2013 中不显示.我该如何解决问题?
I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the problem?
这是电子邮件的 HTML:
Here's the HTML for the email:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
border: 0px;
outline: 0px;
}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
body {margin:0; padding:0;}
table td {border-collapse:collapse;}
img {max-width:100%;}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
<tr>
<td>
<table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
<tr>
<td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
</tr>
<tr>
<td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">
<img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>
</td>
</tr>
<tr>
<td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
</tr>
<tr>
<td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
</tr>
<tr>
<td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">aaa@aaa.com!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
<tr>
<td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
</tr>
<tr>
<td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
推荐答案
电子邮件阅读器支持背景图像
Outlook 2007 及更高版本仅支持 2 种显示背景图像的方式:
Email-reader support for background images
Outlook 2007 and later only supports 2 ways to display a bg image:
- 在 body 标签上使用 HTML 背景属性
- 在 body 标签上使用内嵌背景图片样式
在这两种情况下，Outlook 缩放图像的方式与其他电子邮件阅读器不同，并且无法防止背景图像平铺.
In both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.
因此，出于所有实际目的，背景图像不是支持各种电子邮件阅读器的选项.相反，您需要使用前景图像(img 标签).
So for all practical purposes, background images aren't an option for supporting a wide range of email readers. Instead, you'll need to make do with foreground images (img tags).
Outlook 2007+、Gmail、Hotmail 和 Yahoo Mail 不支持 CSS 定位.因此，无法将文本元素放置在前景图像之上.
Outlook 2007+, Gmail, Hotmail, and Yahoo Mail don't support CSS positioning. As a result, there's no way to place a text element on top of a foreground image.
将电子邮件分成不同区域(通常使用 HTML 表格)时，每个区域可以是文本元素或前景图像.但是你不能在同一个区域中同时拥有两者(即，你不能让两个元素占据相同的空间或重叠).
When slicing up the email into different areas (typically using HTML tables), each area can either be a text element or a foreground image. But you can't have both in the same area (i.e., you can't have two elements occupying the same space or overlapping).
对于上面没有文字的图像的区域，可以将电子邮件的该部分剪切为单独的前景图像.
For areas where there's an image with no text on top of it, that part of the email can be cut as a separate foreground image.
对于顶部带有文字的图像的区域，有 3 个选项:
For areas where there's an image with text on top of it, there are 3 options:
- 将文本剪切为图像的一部分.这会损害电子邮件的可用性，对于默认禁用图像(因为他们最初看不到文本)的用户来说尤其成问题.
- 将图像显示为背景图像，了解 Outlook 2007+ 用户不会看到图像(优雅降级).
- 请勿尝试在任何电子邮件阅读器中显示背景图片.
适度地，选项#1 通常是安全且合理的.但是当大量使用时，它会导致电子邮件中的图像与文本的比例非常高，这可能会触发一些垃圾邮件过滤器.在大量使用选项 #1 之前，请在各种垃圾邮件过滤器中测试电子邮件.
In moderation, option #1 is usually safe and reasonable. But when used heavily, it leads to a very high ratio of images to text in the email, which may trigger some spam filters. Before making heavy use of option #1, test the email in a variety of spam filters.
在继续选项 #2 或 #3 之前，您可能需要与设计人员一起清除它(因为其中任何一个都会损害 Outlook 2007+ 中的设计).从更大的角度来看，在设计电子邮件时应谨慎使用背景图像.向设计师指出使用背景图片的影响可能会有所帮助.
Before proceeding with options #2 or #3, you may need to clear it with the designers (as either one compromises the design in Outlook 2007+). In the bigger picture, background images should be used sparingly when designing emails. It may be helpful to point out to the designers the impact of using background images.
这篇关于背景图像在 Outlook 2007 及更高版本中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
