Question

我希望使用的图像作为背景通过css媒体查询更改为较小的版本。

我不太确定为什么它不能在移动设备上运行。

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

#slide1 {
background: url(../images/slides/mobiletest.jpg) center center no-repeat;
-webkit-background-size: 100% 100%;
-moz-background-size: cover;
background-size: 100% 100%;
background-attachment: fixed;
width: 100%;}}

Answer 1

这可能是一些特殊问题。您可以尝试在元素前添加html选择器：

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

    html #slide1 {
        background: url(../images/slides/mobiletest.jpg) center center no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: cover;
        background-size: 100% 100%;
        background-attachment: fixed;
        width: 100%;
    }
}

Answer 2

＆＃13;

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation : landscape){

    html #slide1 {
        background: url(../images/slides/mobiletest.jpg) center center no-repeat;
        -webkit-background-size: 100% 100% !important;
        -moz-background-size: cover !important;
        background-size: 100% 100% !important;
        background-attachment: fixed !important;
        width: 100% !important;
    }
}

＆＃13;

使用！在css中很重要，希望它可以工作

图像在移动设备上没有变化

2 个答案: