Question

我有一张用于背景图像的4496x3000图像。它响应直到它降到大约1190px，此时它不是。我想也许创建媒体查询并使用较小的图像会有所帮助，但事实并非如此。我的代码有什么问题导致它无法响应？

body, html {
    margin: 0;
    padding: 0;
    width: 100%      
}

.bgimg {
  width: 100%;    
  background-image: url(../img/pexels-photo-Original-4496x3000.jpeg);  
  opacity: 0.65;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  background-color: #464646;   
}

@media only screen and (max-width : 1190px) {
    .bgimg {
        background-image: 
            url(../img/pexels-photo-medium-1280x854.jpeg); 
    }
}

<body class="bgimg">

Answer 1

我在没有媒体查询的情况下尝试了代码，但它运行良好，即使我的背景图像响应。你应该尝试使用另一个（更大的）图像而不使用媒体查询。

背景图像在某个宽度处停止响应

1 个答案: