在Outlook中如何使通讯背景图像?
我正在尝试制作简报,我有一些图像作为背景和文字。 这很容易,但我需要这个工作在Ms Outlook
。
我曾经尝试过:
1。
<td width="100" height="100" style="background: url('someurl');">text</td>
2。
<td width="100" height="100" background="someurl">text</td>
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>
但是在outlook方面没有什么效果。 我不知道如何解决它。 我正在使用Outlook 2007。
任何帮助,将不胜感激。
向上
“Bulletproof电子邮件背景图像”的强大工具(VML for Outlook 2007/2010/2013,HTML / CSS for Outlook 2000/2003,Gmail,Hotmail …)
作为一个例子:
<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>
为了有指定的背景图像到完整的电子邮件正文。
此链接有助于使用vector标记语言(VML)
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
你不能添加一个背景图像的html
通讯,这是在Outlook中查看。 它只是不会工作,因为他们忽略了财产。
您只能在文本后面使用块颜色( 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月
我认为最好更新这个列表,因为它现在得到奇怪的upvote – 一个伟大的链接到当前的电子邮件客户端支持可在这里: https : //www.campaignmonitor.com/css/
背景在Outlook中工作,但只在电子邮件的<body>
标记中。 它不会在个人的<td>
,只有整个电子邮件。
更新:或者,您可以使用VML方法 ,它允许您将背景图像添加到Outlook中的单个页面元素。
这适用于大多数客户,包括Outlook:
<body style="background-image: url('img.jpg');"> <table width="100%" 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-qc-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-qc-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>
我能做到这一点的唯一方法就是通过这个代码(TD表格)。 我在Outlook客户端2010testing。我也通过networking邮件客户端testing,它为两个工作。
你唯一需要做的就是改变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>
资源
并非所有的HTML和CSS都受到Microsoft Office产品,特别是Outlook的支持; 请在此处查看有关受支持的元素的参考信息 ,以了解在呈现HTML时您可以在Outlook中无法使用的内容。
具体来说,从这个链接它没有说明background
CSS属性是支持的div
元素。 你可能不得不使用一个img
并做一些hacky分层。
请注意,在你的第二个例子中,你有一个报价不匹配,这将无济于事。
最后,我刚刚在提供的链接中遇到了一个问题,就是Outlook HTML和CSSvalidation程序 – 您可以尝试在您的时事通讯标记中运行,看看它是否给您提供任何build议/替代scheme。
几个月前,我正在为我的公司工作所见即所得的电子邮件编辑器时遇到了这个问题。 Outlook只支持将背景图像应用于<body>
标签 – 任何其他元素,它会失败。
最后,我发现唯一的解决方法是使用<div>
元素进行文本input,然后在内容提交过程中,我将带有<div>
内容的AJAX请求发送到一个PHP脚本,该脚本将文本写入空白我们的标题图像的版本,保存该文件并返回其(唯一生成)的名称。 然后,我使用Javascript来删除<div>
并使用src
属性中返回的文件名添加一个<img>
标签。
您可以从PHP文档站点上的imagecreatefrompng()
页面获取所有信息/方法。
Outlook中不支持背景图像。 您必须使用图像,并使用相对位置或绝对位置将其放在文本后面。
这里有一些解释:
http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/
您只能在身体标记或表格中使用它。 像这样的东西:
<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (ie background-repeat)">
这对我有效。