Mailchimp 背景大小的封面答案

【问题标题】：Mailchimp background-size coverMailchimp 背景大小的封面
【发布时间】：2017-05-26 20:23:47
【问题描述】：

我尝试以多种不同方式制作背景图片封面，但 Mailchimp 似乎删除了那段代码。

关于如何完成这项工作的任何方法。

干杯，迈克尔

【问题讨论】：

当你说它删除它时，你在什么时候注意到它？是发送测试邮件之后，还是直接点击下一步？由于许多电子邮件客户端不支持它，这可能是问题所在并解释了它被删除的原因。

标签： html css mailchimp background-size

【解决方案1】：

啊Mailchimp。好吧，在自定义模板中，最好的办法就是做所有事情。意思是，使用 CSS 和默认表格样式将其添加到表格或 TD。

您还必须考虑您的电子邮件将发送到的 Outlook 用户。

所以你必须添加一些东西。

让我们从head 上方的html 标记开始。首先，最好使用的 doctype 是 XHTML 1.0 transitional。现在我知道你可以用一个空的 html 标签和 NO DOCTYPE 做一个，但你没有给自己任何好处。

将<html> 更改为<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

这会说“您使用的是 Microsoft。好的，这些规则在哪里？”

接下来，在CSS 中你需要添加这个：

#outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }
    .ExternalClass{
        width:100%;
    }
    v*{
        behavior:url(#default#VML);
        display:inline-block;
    }

注意v*和#outlook a之类的。

所以你有了这些，现在你可以添加背景的东西。在您想要背景的 EACH 表或 td 中，您必须内联添加它。但是使用xlmns 包装器也是一个好习惯。这不一定是代码，它可以被注释掉，仍然可以作为备份读取。

<!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
  <v:fill type="tile" src="YOURIMAGEPATH.jpg" color="#000000"/>
  </v:background>
  <![endif]-->

<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#000000" background="YOURIMAGEPATH.jpg" style="background-image:url(YOURIMAGEPATH.jpg)">
     <tr>
         <td align="center">
            <!--YOUR CONTENT-->
         </td>
     </tr>
</table>

<!--[if gte mso 9]>
   </v:textbox>
   </v:rect>
<![endif]-->

注意整个表格是如何包装在该注释部分中的？也就是说，基本上如果您的收件人使用的是 Outlook，它将继续渲染背景。

Campaign Monitor 为 table 和 td 做这件事也非常棒。还要记住，您不能使用cover 或根本不倾斜背景。只需将其设置为您的电子邮件的 100% 大小即可。

<!--Hopefully not more than 600px-->

Backgrounds.cm by Campaign Monitor

【讨论】：