email - 发送带有背景图像的电子邮件

标签 email outlook vml

我尝试创建一封电子邮件,其中包含表格中的图像作为背景图像。我发现了一部分应该可以工作的代码。在大多数电子邮件客户端中,它确实有效,但在 Outlook 2010 中我看到的是图像,但看不到文本。我能做些什么来让它发挥作用吗?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HVAC Success Confirmation</title>
</head>
<body style="background-color: #999999; vertical-align: top;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
    <td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.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; width: 600px; height: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" />
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; top: -5; left: -10; border: 0; z-index: 2;'>
        <div>
        <![endif]-->
        <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
          <tr>
            <td height="350" align="center" valign="top" style="padding-top:80px">
                <p>This table in here has a bunch of stuff I want to lay over the background image...</p>         
            </td>
          </tr>
        </table>
        <!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
    </td>
</tr>
</table>
</body>
</html>

我发现了多个页面,例如 http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/但这并没有让我更进一步。

最佳答案

我能够做到这一点的唯一方法是通过此代码(TD 表)。我在 Outlook 客户端 2010 中进行了测试。我还通过网络邮件客户端进行了测试,它对两者都有效。 复制并粘贴此内容,您唯一需要做的就是更改 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

关于email - 发送带有背景图像的电子邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12693556/

相关文章:

HTML 代码太长

linux - 更改本地主机 sendmail 发件人

php - MySQL 选择一个包含替换文本的列,它等于一个值

asp.net - 是否有任何工具可以将旧版 VML 转换为 SVG?

svg - 有 SVG 到 VML 的转换工具吗?离线或在线。 (不是在飞行中)

email - 发件人、发件人和返回路径有什么区别?

excel - 如何根据 Excel 中的值从 Outlook 通讯簿中提取 (VBA)

python - 以编程方式从共享邮箱发送 outlook 电子邮件

email - 如何在 Office 365 中格式化 Outlook 电子邮件的 Markdown ?

javascript - 产品库 - 该网站如何为每种可能的组合生成图像