Question

我正在调整自定义MailChimp新闻稿模板。我试图使用多行表格的代码创建锯齿状边框，它在MailChimp预览中效果很好，但在Outlook或Gmail中无法正确显示（我不知道Gmail不会读取z-index CSS代码：（）。所以我要为每个部分添加一个图像而不是编码它，这样它就可以在所有/大多数电子邮件上正确显示（Outlook仍然不显示图像）。

我遇到的问题是移动媒体查询图像似乎不起作用。桌面图像不断显示，最终会被裁剪。但是，当我删除桌面图像并使用媒体查询代码测试移动版本时，会显示正确的移动图像。我一直在玩它试图看看是否将它从.wideplate更改为#wideplate会改变任何东西，但事实并非如此。我不确定我做错了什么。这是我的代码：

<!---------Code for the desktop image------->
#wideplate{
        min-width:100% !important;
        background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/b641b63a-1c1e-4057-95b9-81f660318b88.png);
        background-repeat:no-repeat;
    }

<!---------Code for the mobile image------->
@media only screen and (max-width: 480px){
    #wideplate{
        background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/4287ef24-d799-4ec4-b56b-3cded7c13b1b.png);
        margin-left:0;
        background-size:cover;
    }
}

这是我为表格显示正确桌面图像的代码，但它无法识别移动设备的媒体查询：

<table border="0" cellpadding="18" cellspacing="0" id="wideplate" width="100%">

这是上面代码显示的内容：

wrong image displayed

如果它使用媒体查询，那么它应该是什么样子，以及当我从标识#wideplate删除桌面图像到.wideplate时的样子：

correct image look

Answer 1

注意 - 首先，我想告诉您许多电子邮件客户端上的背景图片不受支持（主要在Outlook早期版本中）。

解决方案： - 显示错误的图片，因为您使用的是“background-size：cover;” CSS的属性。您应该使用background-size：contains;“属性。您将获得正确的图像。我还建议使用background-position：center;属性以获得最佳实践。

Answer 2

我明白了！我需要添加一个“重要的”;＃39;覆盖其他任何内容，并在移动版本为移动版时优先考虑移动版本。这是正确的代码：

#wideplate{
    min-width:100% !important;
    background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/b641b63a-1c1e-4057-95b9-81f660318b88.png) !important;
    background-repeat:no-repeat !important;
}

@media only screen and (max-width: 480px){
#wideplate{
    background-image:url(https://gallery.mailchimp.com/ae29537a7dd6b198e989ee849/images/4287ef24-d799-4ec4-b56b-3cded7c13b1b.png)!important;
    margin-left:0 !important;
    background-size:cover !important;
}
}

背景图片无法为简报

2 个答案: