我已经通过搜索功能彻底查找了,但没有找到任何与解决我的问题相关的答案。
在我的新网站上,我正在实现一个单一的固定背景图片(大约250x250像素),设置为随着用户向下滚动页面而移动。从其他帖子和我的实验中,CSS属性“background-attachment:fixed”无法在iPad / iPhone浏览器上使用。
一位用户建议创建一个“background-wrap”div的解决方法如下:
#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;
}
这种方法在一定程度上是有效的。但对我来说,它存在一个问题:当用户在移动设备上进行捏合和缩放时,背景图像与前景内容的比例尺不同,导致出现杂乱重叠的效果。
如果答案显而易见,请原谅我。我已经花了数小时在这个网站和其他几个网站上研究这个问题,但没有任何收获。提前感谢您的帮助。