我在将移动页面的背景图像设置为专为移动设备设计的新图像时遇到问题。图片设置为 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>最佳答案
如果它覆盖了背景，那么它就会为滚动留出空间。也许约束容器。或者考虑使用任何类型的媒体查询来解决移动尺寸的问题。将其切换为仅包含在移动设备上。或删除移动设备上的溢出滚动条。
关于javascript - 背景尺寸 : cover causing background image to resize on touch in mobile Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40223881/