javascript - 使全屏 CSS 背景图像出现 "behind"移动键盘

Question

我设置了一个 HTML/CSS 全屏背景图片:

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

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

我不调整大小，而是希望图像显示在键盘“后面”，并遮盖图像的底部。避免调整图像大小将使打开和关闭键盘时不那么刺耳。有什么建议可以实现吗？

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

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

Answer 1

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

之前:

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

之后:

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

只需将 center 更改为 top