Html 媒体查询无法处理背景图像

我的网站上有一个具有以下风格的div：

#image {
    background-image: url(../Images/logo.png);
    border-right: 1px solid black;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 200px;
}

实际上是公司的标志。我想将此徽标更改为较小的屏幕尺寸，因此我进行了以下媒体查询：

@media only screen and (max-width: 930px){
    #image {
        background-image: url(../Images/logoImage%20copy.jpg); 
        width: 88px; 
    }
}

但这一形象仍然没有改变。我接着补充道！重要：

@media only screen and (max-width: 930px){
    #image {
        background-image: url(../Images/logoImage%20copy.jpg); !important
        width: 88px; !important
    }
}

但它仍然没有改变背景图像

除此之外，媒体查询工作正常（其他属性也正常工作）

我还包括html代码：

@仅媒体屏幕和（最大宽度：930px）{
#形象{
背景图片：url(http://placehold.it/80x88)重要的
宽度：88px；！重要
}
}
#形象{
背景图片：url(http://placehold.it/200x80);
右边框：1px纯黑；
高度：80px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
宽度：200px；
}

---

像这样试试。媒体查询应低于默认规则，以便可以正确覆盖它

另一方面，

！重要信息

在

之前不在后面，但不需要，至少对于此代码段是这样

最后，代码段在使用930px作为媒体查询断点的代码段预览中无法正常工作，因为该代码段显示在iframe中，并且其视口小于930px，因此默认规则将始终由代码段预览中的媒体查询覆盖。要避免这种情况，请单击“展开代码段”，在空白页中查看代码段


#图像{
背景图片：url(http://placehold.it/200x80);
右边框：1px纯黑；
高度：80px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
宽度：200px；
}
@仅介质屏幕和（最大宽度：930px）{
#形象{
背景图片：url(http://placehold.it/80x88);
宽度：88px；
}
}
像这样试试。媒体查询应低于默认规则，以便可以正确覆盖它

另一方面，
！重要信息
在
之前不在后面，但不需要，至少对于此代码段是这样

最后，代码段在使用930px作为媒体查询断点的代码段预览中无法正常工作，因为该代码段显示在iframe中，并且其视口小于930px，因此默认规则将始终由代码段预览中的媒体查询覆盖。要避免这种情况，请单击“展开代码段”，在空白页中查看代码段


#图像{
背景图片：url(http://placehold.it/200x80);
右边框：1px纯黑；
高度：80px；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
宽度：200px；
}
@仅介质屏幕和（最大宽度：930px）{
#形象{
背景图片：url(http://placehold.it/80x88);
宽度：88px；
}
}

你能不能加入你的HTML代码，这样我就可以试着复制你的问题？@itsanewabstract我已经添加了HTML代码示例你能加入你的HTML代码，这样我就可以试着复制你的问题？@itsanewabstract我已经添加了HTML代码示例