html 电子邮件中的背景图像 css - Gmail 不支持
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8015515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background-image css inside an html email - Gmail does not support
提问by SilverLight
i want to send html body email like below with background-image css to my users :
我想向我的用户发送如下所示的带有背景图像 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>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
但正如下面的链接所说，谷歌不支持背景图像 css！
http://www.campaignmonitor.com/css/
what can i do about that ?
我该怎么办？
回答by jdavies
Have you tried setting the backgroundattribute of a table?
您是否尝试过设置表格的背景属性？
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
这是以下 Mailchimp 博客文章中详细介绍的推荐方法：HTML 电子邮件中的背景图像和 CSS。
Example(Tested in Gmail)
示例（在 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>
回答by rochal
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
你对此无能为力。由于安全原因，许多网络邮件应用程序不支持使用 CSS 设置背景图像。
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" />tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
在文本后面实际显示背景的唯一方法是创建一个带有文本的图像并使用<img src="##" />标签显示它。但是，请始终记住添加指向电子邮件文本版本的链接和/或指向基于网页的时事通讯副本的链接。
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
此外，您需要记住时事通讯设计与网站设计非常不同。您需要忽略所有常用标准，您需要使用表格、内联样式、img 标签等。
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
查看此页面以获得一些好的建议：http: //www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
MailChip（可能是最流行的时事通讯管理系统）对如何编写 HTML 电子邮件几乎没有很好的建议：http: //kb.mailchimp.com/article/how-to-code-html-emails
回答by magicgod
I tested on gmail: gmail will remove background-color=#FFFFFF with "background-image", it's weird.
我在 gmail 上测试过：gmail 会用“background-image”删除 background-color=#FFFFFF，这很奇怪。
"background" works, so convert background-color and background-image to "background" in style.
“背景”有效，因此将背景颜色和背景图像转换为“背景”样式。
"background-color"=#FEFEFE works too
"background-color"=#FEFEFE 也适用
tested on 2013-09-10
于 2013-09-10 测试
回答by Drachenfels
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
截至 2019 年更新。虽然从电子邮件中的内嵌图像添加背景图像存在问题（至少我没有找到使其工作的方法）。实际上 css-background 图像至少在某些元素上运行良好，只要它们是资源的绝对 url，我的代码片段截至 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">
This makes me wonder why it didn't work for the author. I have few theories:
这让我想知道为什么它对作者不起作用。我有几个理论：
a) back then it didn't work
a) 当时它没有用
b) it does not work on div elements
b) 它不适用于 div 元素
c) link was broken
c) 链接已损坏
d) missing single quotation mark
d) 缺少单引号
e) single and not double quotation mark around attribute style
e) 属性样式周围的单引号而不是双引号
f) despite the width and height on style, div was of 0x0 size
f) 尽管样式有宽度和高度，但 div 的大小为 0x0
(Some of those above sound stupid)
（以上有些听起来很愚蠢）
