背景图像未显示正确的图像，用于时事通讯的移动媒体查询答案

【问题标题】：Background-Image not displaying correct image for mobile Media Query for newsletter背景图像未显示正确的图像，用于时事通讯的移动媒体查询
【发布时间】：2017-12-16 07:15:14
【问题描述】：

我正在调整自定义 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

这是使用媒体查询时 tt 的样子，以及当我将桌面图像从 id #wideplate 删除到类 .wideplate 时的样子：

correct image look

【问题讨论】：

标签： css image mobile media-queries background-image

【解决方案1】：

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

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

【讨论】：

我将background-size: cover 更改为建议的background-size:contain，但它仍然没有正确显示。似乎它根本没有使用该图像注册媒体查询。当我右键单击并检查浏览器中的代码时，它仍在使用桌面图像的 URL 并且不输入移动图像。一旦我将代码复制并粘贴到 background-image 区域的检查编辑器中，它就会显示出来。所以看起来它没有注册有移动图像背景。不过还是谢谢你的建议。
你能分享你的源页面吗？
嘿@mybestpatron！您可以在我的评论中看到有助于解决以下问题的代码。感谢您的意见！

【解决方案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;
}
}

【讨论】：