Question

我正在尝试使用媒体查询响应背景图像，但图像保留其原始大小。

我看不出我哪里做错了。我感谢任何帮助

#wrapper{
   background: url(https://via.placeholder.com/1500x1000) center center cover no-repeat fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 100vh;
}

@media (min-width:1201) {
  #wrapper {
    background-image: url(https://via.placeholder.com/1300x900);
  }
}

@media (max-width:1200px) and (min-width:901) {
  #wrapper{
    background-image: url(https://via.placeholder.com/900x750);
  }
}

@media (max-width:900px) and (min-width:601) {
  #wrapper {
    background-image: url(https://via.placeholder.com/800x650);
  }
}

/* For mobile devices */
@media only screen and (max-width: 600px) {
  #wrapper{
    
    background-image: url(https://via.placeholder.com/500x405);
  }
}

<div id="wrapper">

</div

Answer 1

检查 HTML 发现您的 background 属性无效。试试

#wrapper{
   /* mobile first this image and move to wherever you intended this one */
   background: url(https://via.placeholder.com/1500x1000) center center no-repeat;
   background-size: cover;
   background-attachment: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100vw;
   height: 100vh;
}

您的其余查询可能需要进行一些清理

/* For mobile devices */
@media only screen and (max-width: 600px) {
  #wrapper{
    background-image: url(https://via.placeholder.com/500x405);
  }
}

@media (min-width:601px) {
  #wrapper {
    background-image: url(https://via.placeholder.com/800x650);
  }
}

@media (min-width:901px) {
  #wrapper{
    background-image: url(https://via.placeholder.com/900x750);
  }
}

@media (min-width:1201px) {
  #wrapper {
    background-image: url(https://via.placeholder.com/1300x900);
  }
}

背景图片无响应问题

1 个答案: