点击查看效果

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      /* 标题板块 */
      .title {
        height: 100%;
        overflow: hidden;
      }

      .title img {
        display: block;
        filter: blur(5px);
        width: 100%;
        height: 100%;
        object-fit: fill;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .page {
        width: 100%;
        height: 100%;
        background-size: cover;
        /* 让背景图片铺满整个元素*/
        background-position: center top;
        /* 将背景图片的位置设置为居中顶部 */
        background-repeat: no-repeat;
        /* 设置不重复平铺 */
        background-attachment: fixed;
        /* 将背景图片设置为固定定位 */
      }

      /* 分页1 - 骚话 */
      .page1 {
        background-image: linear-gradient(to right, rgba(0, 162, 255, 0.4), rgba(255, 0, 255, 0.2)), url('http://qiniuyun.zfc.life/zfcxhyh/images/bg1.jpg');
      }

      /* 分页2 - 时间轴 */
      .page2 {
        height: 100%;
        background-image: linear-gradient(to right, rgba(0, 162, 255, 0.4), rgba(255, 0, 255, 0.2)), url('http://qiniuyun.zfc.life/zfcxhyh/images/bg2.jpg');
        padding-top: 5%;
      }

      /* 分页2 - 时间轴 */
      .page3 {
        height: 100%;
        background-image: linear-gradient(to right, rgba(0, 162, 255, 0.4), rgba(255, 0, 255, 0.2)), url('http://qiniuyun.zfc.life/zfcxhyh/images/bg3.jpg');
        padding-top: 5%;
      }

      /* 分页2 - 时间轴 */
      .page4 {
        height: 100%;
        background-image: linear-gradient(to right, rgba(0, 162, 255, 0.4), rgba(255, 0, 255, 0.2)), url('http://qiniuyun.zfc.life/zfcxhyh/images/bg4.jpg');
        padding-top: 5%;
      }
    </style>
  </head>
  <body>
    <!-- 标题板块 -->
    <div class="title">
      <img src="http://qiniuyun.zfc.life/zfcxhyh/images/bg1.gif" alt="bgGif" />
      <p id="tqyxhj"></p>
    </div>

    <div class="page page1">
    </div>
    <div class="page page2">
    </div>
    <div class="page page3">
    </div>
    <div class="page page4">
    </div>

    <script src="http://qiniuyun.zfc.life/zfcxhyh/js/jquery.js"></script>
    <script src="http://qiniuyun.zfc.life/zfcxhyh/js/su.js"></script>

    <script type="text/javascript">
      jQuery(document).ready(function($) {
        $("body").wpSuperSnow({
          flakes: ["http://qiniuyun.zfc.life/zfcxhyh/images/004.png",
            "http://qiniuyun.zfc.life/zfcxhyh/images/003.png",
            "http://qiniuyun.zfc.life/zfcxhyh/images/002.png",
            "http://qiniuyun.zfc.life/zfcxhyh/images/001.png"
          ],
          /* 雪花的图片地址数组。 */
          totalFlakes: "100",
          /* 雪花的数量。 */
          zIndex: "999999",
          /* 雪花的 z-index 值。 */
          maxSize: "30",
          /* 雪花的最大尺寸。 */
          maxDuration: "20",
          /* 雪花的最大持续时间。 */
          useFlakeTrans: false /* 是否启用雪花的过渡效果。 */
        });
      });
    </script>
  </body>
</html>