电子邮件通讯背景图像和字体颜色答案

【问题标题】：Email Newsletter Background Image & Font Color电子邮件通讯背景图像和字体颜色
【发布时间】：2012-10-05 07:10:08
【问题描述】：

我刚刚编写了一个电子邮件设计，在 Litmus 中对其进行了测试，发现以下错误：

Outlook.com： 时事通讯没有背景图片，并且某些标题 (h4) 字体颜色完全不同。尽管链接可以使用相同的颜色。展望 2003-2011 工作正常。

Hotmail： hotmail 也是如此，因为它也不会显示时事通讯的背景。

这是试金石结果。

https://tahir.litmus.com/tests/9401666/versions/2/screenshots

这是背景图片的代码：

<body background="http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style=" width:100%; margin: 0;padding: 0;width: 100% !important;-webkit-text-size-adjust: none; background-image: url('http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg'); background-repeat:repeat-y no-repeat; background-position: top center; background-color: #5c130a;">

    <!--[if gte mso 9]>
    <v:background fill="t">
    <v:fill type="tile" src="http://gallery.mailchimp.com/ab941597d81bf8a59e91efd1f/images/body_bg_.3.jpg" />
    </v:background>
    <![endif]-->

谢谢。

【问题讨论】：

标签： html email newsletter hotmail outlook.com

【解决方案1】：

请记住，客户端（和版本）对 CSS 的支持并不相同

要获得概览，您应该查看http://www.campaignmonitor.com/css/

【讨论】：

是的，我知道。但是outlook.com 支持背景HTML。
你读过信息吗？ Outlook.com 不支持背景 CSS 您是否改用了背景 html 属性？有关更多信息，请发布一些代码
我不知道您的条件评论是否生效，但我记得将背景放在正文中的问题...campaignmonitor.com/blog/post/3170/…在这篇文章中是一个适合我的解决方案
我遵循了这一点，它在 Outlook 2003-2013 中确实可以 100% 工作，但在 Outlook.com 和 hotmail 中却不行。这是已发布的石蕊结果。 tahir.litmus.com/pub/c63439a
这里是完整的时事通讯代码：html.litmus.com/email/?url=/sitevista/…

【解决方案2】：

这是我们的一个sn-p。

<td height="300px" style="margin:0;border-collapse:collapse!important;margin:0;padding:0;text-align:left;vertical-align:top;">
<!--[if (gte mso 9)]><img src="http://yourdomain.com/email_campaigns/_templates/template_061617/ImageHero_620x975_Nindi_1_OL.jpg" style="width:100%;height:auto;border:0; display: block;" /><![endif]-->
<div style="mso-hide: all;">
<img src="http://yourdomain.com/email_campaigns/_templates/template_061617/newsletter-blank.png" width="100%" style="width:100% !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;margin:0 0 0 0;border-width:0;height:auto;margin-bottom:0;" />
</div>

【讨论】：