背景图像未显示新闻通讯的移动媒体查询的正确图像

Question

我正在调整自定义 MailChimp 新闻稿模板。我尝试使用多行 table 的代码创建锯齿状边缘框，它在 MailChimp 预览中效果很好，但在 Outlook 或 Gmail 中无法正确显示（我不知道 Gmail 不会读取 z-索引 CSS 代码 :( )。所以我求助于为每个部分添加图像而不是对其进行编码，以便它可以在 all/most 电子邮件中正确显示（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 代码，它显示正确的桌面图像，但它不识别移动设备的媒体查询：

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

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

wrong image displayed

这是 tt 使用媒体查询时的样子，以及当我将桌面图像从 id #wideplate 删除为 class [=13 时的样子=]:

correct image look

Answer 1

注意- 首先我想让你知道很多电子邮件客户端不支持背景图片（主要是在 outlook 早期版本）。

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

Answer 2

我想通了！我需要添加一个 '!important;'覆盖任何其他内容，并在尺寸适合移动设备时优先考虑移动版本。这是正确的代码：

#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;
}
}

背景图像未显示新闻通讯的移动媒体查询的正确图像

Background-Image not displaying correct image for mobile Media Query for newsletter

css

mobile

image

background-image

media-queries