Html 如何在 Outlook 中制作时事通讯的背景图片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12970143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How make background image on newsletter in outlook?
提问by Mateusz Rogulski
I'm trying to make newsletter where I have some image as background and text on it. This is easy but I need this to work on Ms Outlook.
我正在尝试制作时事通讯，其中我有一些图像作为背景和文字。这很容易，但我需要这个来处理Ms Outlook。
What I have tried:
我尝试过的：
1.
1.
<td width="100" height="100" style="background: url('someurl');">text</td>
2.
2.
<td width="100" height="100" background="someurl">text</td>
3.
3.
<td width="100" height="100">
<div style="width: 0px; height:0px; position: relative;">
<div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">
text
</div>
</div>
</td>
But nothing works well on outlook. I have no idea how fix it. I'm using outlook 2007.
但在前景方面没有任何效果。我不知道如何解决它。我正在使用 Outlook 2007。
Any help would be appreciated.
任何帮助，将不胜感激。
回答by laurent
Powerful tool for "Bulletproof Email Background Images" (VML for Outlook 2007/2010/2013, and HTML/CSS for Outlook 2000/2003, Gmail, Hotmail...)
强大的“防弹电子邮件背景图像”工具（适用于 Outlook 2007/2010/2013 的 VML，以及适用于 Outlook 2000/2003、Gmail、Hotmail...的 HTML/CSS）
as an exemple :
例如：
<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 height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
</td>
</tr>
</table>
</div>
in order to have the specified background image to Full email body.
以便将指定的背景图像添加到完整的电子邮件正文中。
This link help to use the Vector Markup Language (VML)
此链接有助于使用矢量标记语言 (VML)
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
回答by C?????N????
you cannot add a background image to an htmlnewsletter which is to be viewed in outlook. It just wont work, as they ignore the property.
您不能将背景图像添加html到要在 Outlook 中查看的时事通讯。它只是行不通，因为他们忽略了该属性。
You can only have block colours (background-color) behind text.
您只能background-color在文本后面使用块颜色 ( )。
Outlook doesn't support the following CSS:
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
Source: http://msdn.microsoft.com/en-us/library/aa338201.aspx
来源：http: //msdn.microsoft.com/en-us/library/aa338201.aspx
UPDATE - July 2015
更新 - 2015 年 7 月
I thought it best to update this list as it gets the odd upvote every now and then - a great link to current email client support is available here: https://www.campaignmonitor.com/css/
我认为最好更新这个列表，因为它时不时地得到奇怪的赞成——这里有一个指向当前电子邮件客户端支持的很好的链接：https: //www.campaignmonitor.com/css/
回答by John
Background DOES work in Outlook, but only in the <body>tag of the email. It won't work in individual <td>'s, only the whole email.
背景在 Outlook 中有效，但仅适用于<body>电子邮件的标签。它不适用于个人<td>，仅适用于整个电子邮件。
UPDATE: Alternatively you can use the VML methodwhich allows you to add background images to individual page elements in Outlook.
This works in most clients including Outlook:
这适用于包括 Outlook 在内的大多数客户端：
<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">
Here is the full code that works in all major email clients including Outlook. It has background-image set with fallback to background in a 100% width table.
这是适用于所有主要电子邮件客户端（包括 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 width="100%" 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 width="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="1000" align="center" valign="middle">
Center panel
</td>
</tr>
</table>
<!-- /CENTER FLOAT -->
</td>
</tr>
</table>
<!-- /BODY FAKE PANEL -->
</body>
</html>
回答by grepit
The only way I was able to do this is via this code (TD tables). I tested in outlook client 2010. I also tested via webmail client and it worked for both.
我能够做到这一点的唯一方法是通过此代码（TD 表）。我在 Outlook 客户端 2010 中进行了测试。我还通过 webmail 客户端进行了测试，并且两者都适用。
The only things you have to do is change your_image.jpg (there are two instances of this for the same image make sure you update both for your code) and #your_color.
您唯一需要做的就是更改 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>
回答by Muskan Upadhyay
You can use the code below :
您可以使用以下代码：
<!--[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]-->
Note: Include this code above the table for which the background image is needed. Also, add the closing tag mentioned below, after the closing tag of the table.
注意：在需要背景图像的表格上方包含此代码。另外，在表格的结束标记之后添加下面提到的结束标记。
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
回答by Lucas
You can use it only in body tag or in tables. Something like this:
您只能在正文标签或表格中使用它。像这样的东西：
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">
This worked for me.
这对我有用。
回答by Webdesign7 London
There is something explained here :
这里有一些解释：
回答by Grant Thomas
Not all HTML and CSS is supported by Microsoft Office products, Outlook in particular; take a look here for referenceon supported elements for what you can and can't use in Outlook when rendering HTML.
并非所有 HTML 和 CSS 都受 Microsoft Office 产品的支持，尤其是 Outlook；在此处查看有关在呈现 HTML 时在 Outlook 中可以使用和不可以使用的受支持元素的参考。
Specifically, from that link it doesn't state the backgroundCSS property is supported for divelements. You might have to use an imgand do some hacky layering.
具体来说，该链接并未说明元素background支持 CSS 属性div。您可能必须使用 animg并进行一些hacky分层。
Note that in your second example you have a quote mismatch, which won't help any.
请注意，在您的第二个示例中，您的报价不匹配，这无济于事。
Lastly and something I just came across at the link provided is the Outlook HTML and CSS Validator tool - you could try running that against your newsletter markup and see if it gives you any suggestions/alternatives.
最后，我刚刚在提供的链接中遇到的东西是Outlook HTML 和 CSS 验证器工具- 您可以尝试针对您的时事通讯标记运行它，看看它是否给您任何建议/替代方案。
回答by Ultrabenosaurus
I had exactly this problem a couple of months ago while working on a WYSIWYG email editor for my company. Outlook only supports background images if they're applied to the <body>tag - any other element and it'll fail.
几个月前，我在为我的公司开发 WYSIWYG 电子邮件编辑器时遇到了这个问题。Outlook 仅支持应用于<body>标记的背景图像- 任何其他元素都会失败。
In the end, the only workaround I found was to use <div>element for text input, then during the content submission process I fired an AJAX request with the <div>'s content to a PHP script which wrote the text onto a blank version of our header image, saved the file and returned its (uniquely generated) name. I then used Javascript to remove the <div>and add an <img>tag using the returned filename in the srcattribute.
最后，我找到的唯一解决方法是使用<div>element 进行文本输入，然后在内容提交过程中，我向<div>PHP 脚本发出了一个包含's 内容的 AJAX 请求，该脚本将文本写入我们标题图像的空白版本，保存文件并返回其（唯一生成的）名称。然后我使用 Javascript 删除<div>并<img>使用src属性中返回的文件名添加标签。
You can get all the info/methodology from the imagecreatefrompng()page on the PHP Docs site.
您可以从PHP Docs 站点imagecreatefrompng()上的页面获取所有信息/方法。
回答by Baronth
Background image is not supported in Outlook. You have to use an image and position it behind the text using position relative or absolute.
Outlook 不支持背景图像。您必须使用图像并使用相对位置或绝对位置将其放置在文本后面。
