主要是利用背景图片的background-attachment属性
    image.png
    设置盒子的背景图片不会跟随页面的滚动而移动
    可以类比 ：position: fixed; 来看

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5. <!--    <meta name="viewport" content="width=device-width">-->
    6.     <title>Title</title>
    7.     <link rel="stylesheet" href="./index.css">
    8. </head>
    9. <body>
    10.     <div id="container">
    11.         <section id="img1" class="img">IMG1</section>
    12.         <section id="content1">CONTENT1</section>
    13.         <section id="img2" class="img">IMG2</section>
    14.         <section id="content2">CONTENT2</section>
    15.         <section id="img3" class="img">IMG3</section>
    16.         <section id="content3">CONTENT3</section>
    17.     </div>
    18. </body>
    19. </html>
    1. *{
    2.     padding: 0;
    3.     margin: 0;
    4. }
    5. ::-webkit-scrollbar{
    6.     display: none;
    7. }
    9. #container{
    10.     width: 100vw;
    11.     height: auto;
    12. }
    14. section{
    15.     height: 100vh;
    16.     background: #c4cbcf;
    17.     color: #fff;
    18.     font-size: 20vh;
    19.     display: flex;
    20.     align-items: center;
    21.     justify-content: center;
    22. }
    23. .img{
    24.     background-size: auto;
    25.     overflow: hidden;
    26.     background-position: center;
    27.     background-attachment: fixed;
    28.     background-repeat: no-repeat;
    29.     max-width: 100%;
    30.     user-select: none;
    31.     cursor: default;
    32. }
    33. #img1{
    34.     background-image: url("./images/1.jpg");
    35. }
    36. #img2{
    37.     background-image: url("./images/2.jpg");
    38. }
    39. #img3{
    40.     background-image: url("./images/3.jpg");
    41. }