如何在 Outlook 中的时事通讯上制作背景图片？
Posted
技术标签:
【中文标题】如何在 Outlook 中的时事通讯上制作背景图片？【英文标题】：How make background image on newsletter in outlook? 【发布时间】：2012-10-09 19:48:57 【问题描述】：我正在尝试制作时事通讯，其中我有一些图像作为背景和文本。这很简单，但我需要它来处理Ms Outlook。
我尝试过的：
1.
<td style="background: url('someurl');">text</td>
2.
<td background="someurl">text</td>
3.
<td >
<div style="width: 0px; height:0px; position: relative;">
<div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">
text
</div>
</div>
</td>
但是在前景上没有什么效果很好。我不知道如何修复它。我正在使用 Outlook 2007。
任何帮助将不胜感激。
【问题讨论】：
尝试设置绝对网址如 url('servername.com/images/urimg.jpg') Full Width Backgrounds on Outlook '07/'10/'13的可能重复 @dcc 这个问题是在 2 年前提出的；） 哦。我只是想指出，如果您仍然感兴趣，我在另一个线程上有一个解决方案。 【参考方案1】：强大的“防弹电子邮件背景图像”工具（适用于 Outlook 2007/2010/2013 的 VML，以及适用于 Outlook 2000/2003、Gmail、Hotmail 的 html/CSS...）
http://emailbg.net
作为一个例子：
<div style="background-color:#f6f6f6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
</td>
</tr>
</table>
</div>
为了让指定的背景图片成为完整的电子邮件正文。
此链接有助于使用矢量标记语言 (VML)
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
www.w3.org/TR/NOTE-VML#_Toc416858389
【讨论】：
考虑包含相关代码...因此，如果该链接停止工作，您的答案将具有一定的价值。 这个解决方案解决了我所有的问题！！ Outlook中div上的背景图片有什么解决办法？ 无法在 Office 365 中工作（版本 16005.11029.20108.0）.. 任何解决方案？【参考方案2】：您不能将背景图片添加到要在 Outlook 中查看的 html 时事通讯。它只是不起作用，因为他们忽略了该属性。
文本后面只能有块颜色 (background-color)。
Outlook 不支持以下 CSS：
azimuth
background-attachment
background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
content
counter-increment
counter-reset
cue-before, cue-after, cue
cursor
display
elevation
empty-cells
float
font-size-adjust
font-stretch
left
line-break
list-style-image
list-style-position
marker-offset
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
pause-before, pause-after, pause
pitch
pitch-range
play-during
position
quotes
richness
right
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-shadow
text-transform
top
unicode-bidi
visibility
voice-family
volume
widows
word-spacing
z-index
来源：http://msdn.microsoft.com/en-us/library/aa338201.aspx
更新 - 2015 年 7 月
我认为最好更新此列表，因为它时不时地获得奇怪的支持 - 此处提供了当前电子邮件客户端支持的绝佳链接：https://www.campaignmonitor.com/css/
【讨论】：
您需要重新设计您的模板以在任何文本后面使用块颜色，并在 td 周围放置图像。 - 基本上，没有 方法可以在 html 电子邮件中获取文本后面的背景图像，这些电子邮件将发送到 Outlook 等电子邮件客户端 - 另一种方法是用图像剪切文本，然后使用img 标签不是背景【参考方案3】：
背景在 Outlook 中有效，但仅在电子邮件的 <body> 标记中有效。它不适用于个人<td>，仅适用于整个电子邮件。
更新：或者你可以use the VML method 这允许你 为 Outlook 中的单个页面元素添加背景图像。
这适用于大多数客户端，包括 Outlook：
<body style="background-image: url('img.jpg');">
<table background="img.jpg">
这是适用于包括 Outlook 在内的所有主要电子邮件客户端的完整代码。它在 100% 宽度的表格中设置了背景图像，并回退到背景。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/output/food-q-c-100-100-7.jpg'); background-color: #0D679C; background-position: top center;" bgcolor="#0D679C">
<!-- BODY FAKE PANEL -->
<table border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/output/food-q-c-100-100-7.jpg">
<tr>
<td>
<!-- CENTER FLOAT -->
<table border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="middle">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
【讨论】：
【参考方案4】：我能够做到这一点的唯一方法是通过此代码（TD 表）。我在 Outlook 客户端 2010 中进行了测试。我还通过 webmail 客户端进行了测试，并且两者都适用。
您唯一需要做的就是更改 your_image.jpg（同一图像有两个实例，请确保您为代码更新了这两个实例）和 #your_color。
<td bgcolor="#your_color" background="your_image.jpg">
<!--[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:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>
<![endif]-->
<p>Text over background image.</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
source
【讨论】：
【参考方案5】：您可以使用以下代码：
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style="width: 700px; height: 460px;">
<v:fill type="tile" src="images/feature-background-01.png" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
注意：在需要背景图像的表格上方包含此代码。另外，在表格的结束标签之后添加下面提到的结束标签。
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
【讨论】：
【参考方案6】：Microsoft Office 产品（尤其是 Outlook）并不支持所有 HTML 和 CSS；在呈现 HTML 时，在支持的元素上使用 look here for reference，了解在 Outlook 中可以使用和不可以使用的元素。
具体来说，从该链接中它没有说明div 元素支持background CSS 属性。您可能必须使用 img 并进行一些 hacky 分层。
请注意，在您的第二个示例中，您的引号不匹配，这无济于事。
最后，我刚刚在提供的链接中看到的是 Outlook HTML and CSS Validator tool - 您可以尝试针对您的时事通讯标记运行它，看看它是否会给您任何建议/替代方案。
【讨论】：
所以答案是？在您链接的站点上是位置td，它具有style 属性。但正如我在我的问题中所说的那样，这是行不通的。
@MateuszRogulski 阅读 CORE 和 COREEXTENDED 样式表子集支持的详细信息，background 仅支持颜色。【参考方案7】：
几个月前，我在为我的公司开发 WYSIWYG 电子邮件编辑器时遇到了这个问题。 Outlook 仅支持应用于 <body> 标记的背景图像 - 任何其他元素都会失败。
最后，我发现的唯一解决方法是使用 <div> 元素进行文本输入，然后在内容提交过程中，我向编写文本的 php 脚本发出了带有 <div> 内容的 AJAX 请求在我们的标题图像的空白版本上，保存文件并返回其（唯一生成的）名称。然后，我使用 javascript 删除了 <div>，并使用 src 属性中返回的文件名添加了 <img> 标记。
您可以从PHP Docs site 上的imagecreatefrompng() 页面获取所有信息/方法。
【讨论】：
【参考方案8】：您只能在正文标签或表格中使用它。像这样的：
<table background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
这对我有用。
【讨论】：
【参考方案9】：这里有一些解释：
https://web.archive.org/web/20140608170948/http://www.campaignmonitor.com:80/blog/post/3363/updated-applying-a-background-image-to-html-email
【讨论】：
【参考方案10】：Outlook 不支持背景图片。 您必须使用图像并使用相对位置或绝对位置将其放置在文本后面。
【讨论】：
非常感谢...我写的内容不适用于我的问题 位置在 Outlook 中也不支持。有关不受支持的 CSS 属性列表，请参阅我的答案以上是关于如何在 Outlook 中的时事通讯上制作背景图片？的主要内容，如果未能解决你的问题，请参考以下文章
时事通讯无法隐藏 gmail 上的响应内容以及当我尝试转发电子邮件时