图像在移动设备上没有变化 [英] Images not changing on mobile devices

问题描述

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

I want the images im using as the background to change to smaller versions through css media queries.

我不太清楚为什么它不能在移动设备上运行.

I'm not quite sure why it is not working on mobile devices.

@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%;}}

推荐答案

@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;
    }
}

在 css 中使用 !important 希望它可以工作

use !important in css hope it can work

这篇关于图像在移动设备上没有变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！