我正在寻找重建类似于流行科学应用程序的效果.基本上有一个大背景图像,然后有HTML/CSS层.当用户滚动内容时,图像的背景位置应保持原位,而不是滚动.
显然在"常规"浏览器中我会使用background-attachment:fixed,但这似乎不适用于ipad.我知道位置:根据safari规范修复不起作用,但是有没有办法实现这个目标？
Ang*_*lao 14
您可以使用此代码制作固定的背景图层来解决此问题.
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url('xx.jpg');
background-attachment: fixed;
}
并把<div id="background_wrap"></div>成<body></body>
<body>
<div id="background_wrap"></div>
</body>
扩展上面安来的答案，我发现解决方案是在滚动时重复我的图像，而不是保持它固定。如果其他人遇到这个问题，我的background_wrap ID的CSS如下：
#background_wrap {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url('../images/compressed/background-mobile.png');
background-repeat: no-repeat;
background-attachment: scroll;
}
只需更改背景大小和背景附件即可使图像静态。