网页中,视差滚动:内容可以滚动,然后背景图片没有动,但是内容滚动过去以后再看背景图已经发生了变化

做到这一点很简单,只是普通的CSS+DIV布局即可,然后背景图片的DIV使用background-attachment属性,设置为flxed(固定)即可

具体代码如下:

      这是html的布局结构------------------------------------

      <div id="box">

        <div class="img" id="img1">IMG1</div>//背景图层

        <div class="text">开始</div>

        <div class="img" id="img2" >IMG2</div>//背景图层

        <div class="text">中间</div>

        <div class="img" id="img3" >IMG3</div>//背景图层

        <div class="text">结束</div>

    </div>

    然后CSS样式里面-----------------------------------------
    //给主盒子100vw,使其100%视口宽度
    #box{
    width: 100vw;
    }
    //给主盒子下面的div设置固定高度,然后使用弹性布局的justify(主轴)align(辅轴)使文字居中
    #box div{
    height: 100vh;
    font-size: 20vh;
    background-color: salmon;
    display: flex;
    /* 主 */
    justify-content: center;
    /* 辅 */
    align-items: center;
    }
    //给背景图层的图片设置重复/大小/**随滚动轴滚动时显示的方式**/图片于盒子中的位置
    .img{
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    }

一句话:想要视差滚动,就给背景图层容器设置属性:background-attachment:flxed;