在移动视图中丢失背景图像

Question

我需要在移动视图中丢失背景图片，但我的@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 进行测试，所以在这里（http://jsfiddle.net/rnewport/em35H/1/）使用max-width 做了一个小提琴，它似乎可以正常工作