css - 在移动 View 中丢失背景图像

Question

我需要在移动 View 中丢失背景图片，但我的@media 查询似乎忽略了请求，这也适用于我正在使用的图片吗？

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    .logo {
    background-image:URL(img/allthingslogoalt.gif);
    height:32px;
    width:222px;
    margin:110px auto 0 auto;
    background-size:444px 64px;
}

}   

}


@media screen and (max-device-width: 800px) {

#allthingsus {
    background-color:#FFF;


}

}


@media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;


}
}

这是主要的 CSS:

.logo {
    background-image:URL(img/allthingslogo.gif);
    height:64px;
    width:444px;
    margin:180px auto 0 auto;
}

#allthingsus {
    background-color:#FFF;
    background-image:URL(img/greypointer.gif);
    background-repeat:no-repeat;
    background-position:top center;


}

我不确定如何解决这个问题？我尝试将其添加为一个类、一个 ID、更改最小/最大高度但没有任何变化？

Answer 1

假设这是试图改变你的背景图片的部分:

@media screen and (max-device-width: 480px) {
#allthingsus {
    background-color:#FFF;
}

您只是设置了背景颜色，因此没有更改背景图像。您需要为此媒体查询设置 background-image: none;。

编辑

无法真正使用媒体查询 max-device-width 进行测试，所以在这里使用 max-width 做了一个 fiddle (http://jsfiddle.net/rnewport/em35H/1/)，看起来工作正常