26

我正在尝试制作时事通讯，其中有一些图像作为背景和文字。这很容易，但我需要这样做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。

任何帮助，将不胜感激。

4

10 回答 10

27

强大的“防弹电子邮件背景图像”工具（适用于 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 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

于 2013-03-25T16:59:56.113 回答
17

您不能将背景图像添加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 月

我认为最好更新此列表，因为它时不时地获得奇怪的支持 - 此处提供了当前电子邮件客户端支持的绝佳链接：https ://www.campaignmonitor.com/css/

于 2012-10-19T08:49:26.370 回答
8

背景在 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-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>
于 2012-11-06T21:13:59.020 回答
1

我能够做到这一点的唯一方法是通过此代码（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>

资源

于 2013-08-14T14:54:52.443 回答
1

您可以使用以下代码：

<!--[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]-->
于 2018-08-30T12:00:13.597 回答
0

几个月前，我在为我的公司开发 WYSIWYG 电子邮件编辑器时遇到了这个问题。Outlook 仅支持将背景图像应用于<body>标签 - 任何其他元素都会失败。

最后，我发现的唯一解决方法是使用<div>element 进行文本输入，然后在内容提交过程中，我向<div>PHP 脚本发起了一个带有 's 内容的 AJAX 请求，该脚本将文本写入我们标题图像的空白版本，保存文件并返回其（唯一生成的）名称。然后我使用 Javascript 删除并使用属性中返回的文件名<div>添加<img>标签。src

您可以从PHP Docs 站点imagecreatefrompng()上的页面获取所有信息/方法。

于 2012-10-19T08:29:14.370 回答
0

Microsoft Office 产品（尤其是 Outlook）并不支持所有 HTML 和 CSS；在此处查看有关在呈现 HTML 时可以在 Outlook 中使用和不能使用的受支持元素的参考。

具体来说，从该链接中，它没有说明元素background支持 CSS 属性div。您可能必须使用img并做一些 hacky 分层。

请注意，在您的第二个示例中，您的报价不匹配，这无济于事。

最后，我刚刚在提供的链接中看到的是Outlook HTML 和 CSS Validator 工具- 您可以尝试针对您的时事通讯标记运行它，看看它是否会给您任何建议/替代方案。

于 2012-10-19T08:23:32.950 回答
0

您只能在正文标签或表格中使用它。像这样的东西：

<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">

这对我有用。

于 2015-06-25T15:05:11.417 回答
-1

Outlook 不支持背景图像。您必须使用图像并使用相对位置或绝对位置将其放置在文本后面。

于 2012-10-19T08:47:21.380 回答