媒体查询不适用于背景图片

Question

我的网站上有一个 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; 
    }
}

但是图像仍然没有改变。然后我添加了 !important:

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

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

除此之外媒体查询工作正常（因为其他属性正在工作）

我还包括 html 代码：

@media only screen and (max-width: 930px){
    #image {
        background-image: url(http://placehold.it/80x88); !important
        width: 88px; !important
    }
}

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

<div id="image"></div>
    <!--Some Code-->

Answer 1

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

另一方面，!important 在 ; 之前而不是在之后，但至少对于此代码段而言是不需要的。

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

#image {
    background-image: url(http://placehold.it/200x80);
    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(http://placehold.it/80x88);
        width: 88px;
    }
}

<div id="image"></div>
    <!--Some Code-->

媒体查询不适用于背景图片

Media query not working with background images

html

css

background-image

media-queries