如何解决背景附件:固定;在某些移动浏览器浏览器上不起作用
我一直在开发网站,并在Iphone 8 plus上的Safari上遇到了一个问题。我使用了背景附件:固定;产生视差效果的结果是,当前它在android的chrome浏览器上看起来像这样:
How it looks on chrome mobile android
这是我想要的,但是在家庭成员Iphone 8上对其进行测试时,图像在滚动时并不会产生视差效果,而是会大幅放大。有没有什么办法解决这一问题?我应该注意在Iphone XR上进行测试时不存在此问题。我的假设是Iphone 8 plus上的浏览器或IOS可能已过时,这就是为什么会发生此问题,但我不确定,只是想知道是否已解决此问题。这是我的代码:
div.image-banner {
background-image: linear-gradient(rgba(0,0.2),rgba(0,0.2)),url('https://images.unsplash.com/photo-1564767655658-4e6b365884ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80');
position: relative;
height: 100vh;
width: 100vw;
background-position: center;
background-repeat: norepeat;
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。