Question

我遇到了一个问题，我将移动设备中的页面背景图像设置为专为移动设备设计的新图像。该图片设置为background-size: cover，除移动Chrome外，其他所有功能都正常。在移动Chrome中滚动时，图片会略微调整大小。该设计还具有绝对的页脚。你可以在这里看到它：

body {
  height: 100%;
  overflow: scroll;
  }

.image {
  display: block;
  background: url(http://drawingimage.com/files/1/Shrek-Donkey-Beautiful-Image-Drawing.png) no-repeat center bottom;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.footer {
  display: block;
  position: absolute;
  width: 100%;
  bottom: -69px;
  background-color: green;
}

<body>
  <div class="wrap">
    <div class="image">
    </div>
    <div class="footer">
    <p> Footer info </p>
    <p> More footer info</p>
    </div>
  </div>
</body>

Answer 1

如果它覆盖了背景，则会留下滚动的空间。也许限制了容器。或者考虑使用任何类型的媒体查询来捕获移动大小的问题。将其切换为仅包含在移动设备上。或删除手机上的溢出滚动。

背景大小：覆盖导致背景图像在移动Chrome中触摸时调整大小

1 个答案: