移动端background-attachment: fixed失效解决方法

在做web前端切图时，我们经常需要做背景图片不跟随内容滚动的效果，这个时候就需要使用到background-attachment: fixed 属性，这个属性及其实现的效果也是近些年非常常见的。但是在H5移动端却较为少见，分析其原因，可能主要的有两点原因，1、移动端会经常使用到移动流量，需要考虑页面打开速度，大块的背景图片不利于页面加载。2、background-attachment: fixed这个属性在移动端是失效的，必须通过hack方法来曲线实现。

本篇文章就来讲解，如何在移动端实现background-attachment: fixed即背景图片不跟随内容滚动的效果。

电脑端正常代码：

.box{
    background-image: url("../photo/bg.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

移动端hack代码：

.box{
    background-image: url("../photo/bg.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: -9999px -9999px;
}
.box::before{
    content: "";
    background-image: inherit;
    background-size: cover;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: -1;
}

代码说明：

.box{
    /*隐藏使原.box的背景不可见*/
    background-position: -9999px -9999px;
}
.box::before{
    content: "";
    /*继承父级背景，也可直接在此定义*/
    background-image: inherit;
    background-size: cover;
    position: fixed;
    top: 0;
    /*在高度上铺满全屏，也可使用 bottom:0;来代替*/
    height: 100vh;
    /* 在宽度上铺满全屏，也可使用 right:0;或width:100vw;来代替*/
    width: 100%;
    /* 层级降低一层，以免遮挡父级内容*/
    z-index: -1;
}

同样需要说明的是，这个问题在小程序切图中也是存在的，解决方法与上述H5切图一致，另外，小程序切图中需要注意：background-image中引用的图片地址需为网络地址，不能直接使用本地图片。猜测有可能是微信官方为了控制小程序代码文件总体积的原因。