我目前正在制作一个网站,在其中使用了一个带有背景图片的
HTML:
CSS:
这对于大多数视口大小都很好用,但在iOS Safari浏览器上,当用户向下滚动时,顶部的工具栏会缩小。这改变了视口高度,
div
,以保持其在 iOS 上即使是固定的属性。代码如下:HTML:
<div id="background" style="background-image: url(bi.jpg);"></div>
CSS:
#background{
position:fixed;
height: 100%;
width: 100%;
z-index:-1;
display:block;
background:no-repeat 50% 0%;
background-size:cover;
}
这对于大多数视口大小都很好用,但在iOS Safari浏览器上,当用户向下滚动时,顶部的工具栏会缩小。这改变了视口高度,
cover
属性试图弥补这一点,因此在滚动完成后会自动调整到稍微新的大小。有没有办法确保背景图像覆盖整个屏幕,并且在滚动后不会改变?这可能需要一些JS,但我不确定。谢谢。