我想为桌面用户和小屏幕用户显示图像作为背景我想显示基本颜色作为整页 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 部分不会覆盖并且图像不会被删除。我该怎么做？
最佳答案
您还需要为移动设备添加一个 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;
}
}
关于css - 整页 JS 背景颜色/图像媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32843056/