解决ios使用background-attachment:fixed造成的显示问题

三火Sunfire

于 2021-02-01 14:37:20 发布

阅读量1.8k

点赞数 2

分类专栏：原生三剑客文章标签： css safari

本文链接：https://blog.youkuaiyun.com/u012914342/article/details/113515158

版权

原生三剑客专栏收录该内容

11 篇文章

订阅专栏

在个人博客上做了一个固定背景下拉的效果，上线后用手中的8P看了一下

好家伙，直接白掉一块，下拉的效果也不在了，换个浏览器也一样，但安卓访问却完全正常？？

最后查了百度，原因大概是ios系统和某些移动端对background-attachment:fixed不兼容，可用伪元素:before的方法代替background-attachment:fixed

原理：固定的伪元素设置一个背景图片

.section1:before{
    content: ' ';
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/images/bg.jpg) center 0 no-repeat;
    background-size: cover;
    background-color: transparent;
}

重新上线，问题解决