Question

我已经设置了一个HTML / CSS全屏背景图片：

html, body {
  background: url("background.jpg") no-repeat center center fixed;
  background-size: cover;
  overflow: hidden;
}

在桌面浏览器中查看时，或者最初在移动浏览器上查看时，背景图像看起来很好。但是，如果我在移动浏览器中打开键盘，则图像会调整大小以覆盖键盘上方的空间。

而不是调整大小，我希望图像看起来像是＆＃34;背后＆＃34;键盘，并使图像的底部遮挡。避免调整图像大小将使键盘的打开和关闭不那么刺耳。有什么建议如何实现这个？

我已尝试在窗口调整大小事件后将document.body.style.backgroundSize设置为原始窗口高度，但这似乎根本不会影响背景图像大小。

以下是无键盘和键盘打开状态的屏幕截图：

Answer 1

我花了很长时间才弄清楚这一点。密钥为background-attachment:fixed;

我最终在移动设备和台式机上使用了完全不同的背景CSS，但是我已经花了足够的时间来做这件事。

我的解决方案：

background: url(../images/my-img.jpg) fixed;
background-size: 150%;
background-position-x: 50%, center;

使用bg-size播放来放大/缩小，然后调整position-x使其左右移动，直到感觉到正确为止。我确定，如果您还需要调整垂直位置，则可以添加位置y。

Answer 2

我也有同样的问题，我的问题解决了

之前：

background: url(bg.jpg) no-repeat center center fixed;

之后：

background: url(bg.jpg) no-repeat center top fixed;

只需将 center 更改为 top