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

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%">

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

显示错误的图像

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

正确的图像外观

Answer 1

注意- 首先，我想让您知道许多电子邮件客户端上的背景图像不受支持(主要是在Outlook早期版本中(。

解决方案： - 错误的图像显示，因为您使用的是 CSS 的"背景大小：封面;"属性。 你应该使用背景大小：包含;" 财产。你会得到正确的图像。我还建议使用背景位置：中心;属性的最佳实践。

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