在移动设备上使用回退来使用颜色而不是背景图像

Question

我正试图在CSS中设置一个回退，以便在使用移动浏览器时将背景图像更改为彩色。

有没有一种方法可以设置当像素达到最大宽度时会起作用的回退。

如下面在我的摘录中所示；仅媒体屏幕，并且(最大宽度：600px(在不使用top body类时工作。

body {
margin: 0;
background-image: url(https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg);
background-size: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
input{
background-color: #03fcd3;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}

Answer 1

您没有覆盖background-image规则，这就是图像仍然显示的原因。您设置了背景颜色，但背景图像仍将显示。

此外，您应该在较大屏幕的媒体查询中添加图像，而不是在较小屏幕中删除图像，否则无论如何都可能加载图像。移动优先总是推荐的方式：(

试试这个(如果你让浏览器窗口变小，你会看到蓝色背景(：

body {
background-color: lightblue;
/* the rest of the CSS that applies on all screen sizes, e.g.: */
margin: 0;
background-size: auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}
/* Note: we show min 601px because it was max: 600px*/
@media only screen and (min-width: 601px) {
body {
background-image: url(https://api.timeforkids.com/wp-content/uploads/2019/09/final-cover-forest.jpg);
/* Add any other CSS for 600+ screens here */
}
}

请注意，新媒体查询设置为601px-您对小屏幕使用的是max:600px，因此小屏幕的CSS将覆盖，包括600px。混合使用max-width:600px和min-width:600px可能会导致意外行为，因为两个媒体查询都将以600px应用。

Answer 2

尝试设置两个媒体查询，不要在开始时设置背景。

初始机身背景未设置

对于移动设备：

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

对于计算机：

@media only screen and (min-width: 600px) {
body {
background-image: url (https://api.timeforkids.com/wp/content/uploads/2019/09/final-cover-forest.jpg);
background-size: auto;
}
}