Question

我想向我的用户发送如下图所示的html正文电子邮件：background-image css：

<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
    My Content
</div>

但正如下面的链接所说google不支持background-image css！
http://www.campaignmonitor.com/css/

我该怎么办？

Answer 1

您是否尝试过设置表的background属性？

这是以下Mailchimp博客文章中详述的推荐方法：Background Images and CSS in HTML Email。

示例（在Gmail中测试）

    <table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
        <tr>
            <td>
                Email Content...
            </td>
        </tr>
    </table>

Answer 2

你无能为力。由于安全原因，许多Web邮件应用程序不支持使用CSS设置背景图像。

实际显示文本背后的唯一方法是创建一个包含文本的图像，并使用<img src="##" />标记显示它。但是，请始终记住添加指向电子邮件文本版本的链接和/或链接到基于网页的简报副本。

Additoinally，您需要记住简报设计与网站设计非常不同。你需要忽略所有通常的标准，你需要使用表格，内联样式，img标签等。

请查看此页面以获取一些好的建议：http://www.sitepoint.com/code-html-email-newsletters/

MailChip（可能是最受欢迎的时事通讯管理系统）对如何编写HTML电子邮件的代码提出了很少的建议：http://kb.mailchimp.com/article/how-to-code-html-emails

Answer 3

我在gmail上测试过： gmail会删除带有“background-image”的background-color =＃FFFFFF，这很奇怪。

“background”有效，因此将背景颜色和背景图像转换为样式中的“背景”。

“background-color”=＃FEFEFE也适用

在2013-09-10测试

Answer 4

从2019年开始进行更新。虽然从电子邮件中的嵌入式图像添加背景图像存在一些问题（至少我没有找到使其工作的方法）。实际上，css背景图片至少在某些元素上可以正常工作，只要它们是资源的绝对网址即可，我的代码段截至2019年6月在gmail上有效。

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">

这使我想知道为什么它不适用于作者。我的理论很少：

a）当时没用

b）它不适用于div元素

c）链接已损坏

d）缺少单引号

e）属性样式周围的单引号而不是双引号

f）尽管样式上有宽度和高度，但div的大小均为0x0

（有些愚蠢的声音

Answer 5

最终对我有用的是将图像扩展名从.svg更改为.png

似乎Gmail不支持.svg图片。

html电子邮件中的背景图像css - Gmail不支持

5 个答案: