Question

此代码是简单的背景图片，但在通过移动浏览器查看时显示3张图片

body {
background-image: url('image-1.jpg');
width: 500px;
height: 600px;
position: relative;
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
  }
}

请建议更改以使图像适合屏幕

Answer 1

你的css只会改变身体的背景图像，我认为这不是你正在寻找的行为。为了获得更好的响应式设计，您需要以百分比形式设置您的身体尺寸width:100vw; height:100vh;，这可能会为您提供所寻求的行为。

Answer 2

只需像这样修改你的代码：

@media only screen and (max-width: 767px) {
  body {
    background-image: url('image-2.jpg');
    background-size: cover;
  }
}

它会再次起作用。

我的网页没有采取相应的行动

2 个答案: