全页JS背景颜色/图像媒体查询

Question

我希望将图像显示为桌面用户和小屏幕用户的背景我希望将基本颜色显示为整页js中不同部分的背景。到目前为止，我只包含了1张图像作为测试。

#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节不会覆盖，并且不会删除较小设备的图像。我该怎么做？

Answer 1

您还需要为移动设备添加background-image属性：

    #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;

    }
}