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

Posted 2023-03-15

技术标签:

【中文标题】html 电子邮件中的背景图像 css - Gmail 不支持【英文标题】：Background-image css inside an html email - Gmail does not support 【发布时间】：2011-12-22 08:45:34 【问题描述】：

我想向我的用户发送如下带有背景图像 css 的 html 正文电子邮件：

<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>

但正如下面的链接所说，谷歌不支持背景图片 css！http://www.campaignmonitor.com/css/

对此我能做些什么？

【问题讨论】：

请不要在标题中添加标签。另外，这与 ASP.Net 无关。你真的无能为力，因为gmail也不支持positon和z-index 重新设计，直到找到可以使用内嵌图像的东西是一种选择，也是人们常用的一种选择。检查您收到的任何其他 html 电子邮件，看看有多少人尝试使用背景图片。但我想将我的标志重复为背景图像 / 所以我不能在 img 中使用 / 我们也不能使用 javascript 来修复一些图像宽度和高度 / 任何其他想法？ 【参考方案1】：

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

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

示例（在 Gmail 中测试）

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

【讨论】：

它有效 - 谢谢亲爱的兄弟 - 这是什么地方？我是新来的！太棒了欢迎！我很高兴它有帮助。有办法重复吗？如果表格的尺寸大于图片，图片会重复填满表格。我们可以在<td>中使用背景属性吗？【参考方案2】：

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

真正在文本后面显示背景的唯一方法是创建一个带有文本的图像并使用<img src="##" /> 标签显示它。不过，请始终记住添加指向电子邮件文本版本的链接和/或指向基于网页的时事通讯副本的链接。

此外，您需要记住时事通讯设计与网站设计非常不同。您需要忽略所有常用标准，您需要使用表格、内联样式、img 标签等。

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

另外，MailChip（可能是最流行的通讯管理系统）对于如何编码 HTML 电子邮件几乎没有很好的建议：http://kb.mailchimp.com/article/how-to-code-html-emails

【讨论】：

感谢有用的链接/我有一个小问题，我不知道我是否可以将其发布为 Q！但是我只想知道用 c# 在 asp.net 中制作 html 电子邮件并在后面发送代码的最佳方法是什么？我应该只在代码后面制作一个html电子邮件还是有更好的方法来制作它们（视觉上的意思）！【参考方案3】：

自 2019 年起更新。虽然从电子邮件上的内联图像添加背景图像存在问题（至少我没有找到使其工作的方法）。实际上，css-background 图像至少在某些元素上可以正常工作，只要它们是资源的绝对 URL，我的 sn-p 在 2019 年 6 月的 gmail 上工作：

<table  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

（上面有些听起来很愚蠢）

【讨论】：

【参考方案4】：

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

Gmail 似乎不支持.svg 图片。