我已经设置了一个HTML / CSS全屏背景图片:
html, body {
background: url("background.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
在桌面浏览器中查看时,或者最初在移动浏览器上查看时,背景图像看起来很好。但是,如果我在移动浏览器中打开键盘,则图像会调整大小以覆盖键盘上方的空间。
而不是调整大小,我希望图像看起来像是"背后"键盘,并使图像的底部遮挡。避免调整图像大小将使键盘的打开和关闭不那么刺耳。有什么建议如何实现这个?
我已尝试在窗口调整大小事件后将document.body.style.backgroundSize
设置为原始窗口高度,但这似乎根本不会影响背景图像大小。
以下是无键盘和键盘打开状态的屏幕截图:
答案 0 :(得分:0)
我花了很长时间才弄清楚这一点。密钥为background-attachment:fixed;
我最终在移动设备和台式机上使用了完全不同的背景CSS,但是我已经花了足够的时间来做这件事。
我的解决方案:
background: url(../images/my-img.jpg) fixed;
background-size: 150%;
background-position-x: 50%, center;
使用bg-size播放来放大/缩小,然后调整position-x使其左右移动,直到感觉到正确为止。我确定,如果您还需要调整垂直位置,则可以添加位置y。
答案 1 :(得分:0)
我也有同样的问题,我的问题解决了
之前:
background: url(bg.jpg) no-repeat center center fixed;
之后:
background: url(bg.jpg) no-repeat center top fixed;
只需将 center
更改为 top