Css 整版JS背景色/图像媒体查询

我想为桌面用户显示图像作为背景，对于较小屏幕的用户，我想为整个页面的不同部分显示基本颜色作为背景。到目前为止，我只包含了一张图片作为测试

#section0{
        background-color: #9aa6a9;

    }
    .section1{
        background-image: url(../imgs/downtown-dubai.png);

    }
    #section2{
        background-color: #9aa6a9;

    }
    #section3{
        background-color: #333;

    }


@media screen (max-width: 750px) {
    /*Section colours for small screens */
    #section0{
        background-color: #9aa6a9;

    }
    .section1{
        background-color: #333;

    }
    #section2{
        background-color: #9aa6a9;

    }
    #section3{
        background-color: #333;

    }

---

对于较小的设备，第1节不会覆盖，图像也不会删除。如何执行此操作？

您还需要为mobile添加一个

背景图像

属性：

    #section0{
        background-color: #9aa6a9;

    }
    .section1{
        background-image: url(../imgs/downtown-dubai.png);

    }
    #section2{
        background-color: #9aa6a9;

    }
    #section3{
        background-color: #333;

    }


@media screen (max-width: 750px) {
    /*Section colours for small screens */
    #section0{
        background-color: #9aa6a9;

    }
    .section1{
        background-image: none;
        background-color: #333;

    }
    #section2{
        background-color: #9aa6a9;

    }
    #section3{
        background-color: #333;

    }
}

---

只需使用

bootstrap

即可对该图像使用

xs hidden

类，如果不使用，则必须从Javascript中执行此操作如果要删除背景图像，则需要覆盖

背景图像

属性。目前，您只需设置一个

背景色

。这不会删除图像。添加

背景图像：无向您的媒体查询库，非常感谢（Y）