Mat*_*ski 19 html outlook background newsletter
我正在尝试制作时事通讯,其中我有一些图像作为背景和文字.这很容易,但我需要这个工作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 2007.
任何帮助,将不胜感激.
小智 24
"防弹电子邮件背景图像"的强大工具(适用于Outlook 2007/2010/2013的VML,适用于Outlook 2000/2003,Gmail,Hotmail的HTML/CSS ...)
作为例子:
<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>
为了将指定的背景图像添加到完整的电子邮件正文.
此链接有助于使用矢量标记语言(VML)
msdn.microsoft.com/en-us/library/bb264137%28v=vs.85%29.aspx
www.w3.org/TR/NOTE-VML#_Toc416858389
Cᴴᵁ*_*ᴺᴶᴬ 15
您无法将背景图像添加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>,只适用于整个电子邮件.
这适用于大多数客户端,包括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-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>
Microsoft Office 产品（尤其是 Outlook）并不支持所有 HTML 和 CSS；请在此处查看有关受支持元素的参考，了解在呈现 HTML 时可以在 Outlook 中使用和不能使用的元素。
具体来说，该链接并未声明元素background支持 CSS 属性div。您可能需要使用img并做一些黑客分层。
请注意，在您的第二个示例中，您的报价不匹配，这不会有任何帮助。
最后，我刚刚在提供的链接中发现了Outlook HTML 和 CSS 验证器工具- 您可以尝试针对您的时事通讯标记运行它，看看它是否为您提供任何建议/替代方案。