如何在多条垂直线后叠加动画 GIF 与视频背景-html教程-PHP中文网

如何在多条垂直线后叠加动画 GIF 与视频背景

本文详解如何通过 css 层叠上下文与 html 结构优化，将动画 gif 和 mp4 视频作为背景层置于多条浮动垂直线之后，实现视觉上的“线条覆盖于动态内容之上”的效果。

本文详解如何通过 css 层叠上下文与 html 结构优化，将动画 gif 和 mp4 视频作为背景层置于多条浮动垂直线之后，实现视觉上的“线条覆盖于动态内容之上”的效果。

要实现在多条垂直线（black div）背后播放动画 GIF 或视频，关键在于理解 CSS 的层叠顺序（stacking context）与 DOM 结构层级关系。原代码中，<img> 和 <video></video> 元素被直接置于 #wrapper 内部，与 .verticle-line 同级——这意味着它们默认按文档流顺序渲染，位于所有垂直线之后（即线条被盖住），而非“在背后”。

正确做法是：将媒体元素作为背景容器的子元素，再让垂直线元素覆盖其上。但注意——单个 .verticle-line 宽仅 5px，无法承载全屏媒体；因此需另设一个全尺寸背景容器（如 .background-layer），并利用 position: absolute + z-index 显式控制层序。

以下是优化后的完整 HTML（含内联 CSS，无需外部文件）：



  <meta charset="UTF-8"><title>垂直线覆盖动态背景</title><style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    #wrapper {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    /* 背景层：容纳 GIF/视频，铺满整个视口 */
    .background-layer {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 1;
    }

    .background-layer img,
    .background-layer video {
      width: 100%; height: 100%;
      object-fit: cover; /* 防止拉伸变形 */
      display: block;
    }

    /* 垂直线层：浮于背景之上 */
    .verticle-line {
      position: absolute;
      width: 5px;
      height: 100%;
      background: black;
      z-index: 2; /* 确保高于背景层 */
    }

    /* 为每条线设置水平位置（等距分布） */
    .verticle-line:nth-child(odd) {
      background: rgba(0, 0, 0, 0.8); /* 可选：增强对比 */
    }
  </style><div id="wrapper">
    <!-- 背景层（GIF 或视频，二选一启用） -->
    <div class="background-layer">
      <!-- ✅ 推荐：优先使用 video（更省内存、支持 autoplay muted） -->
      <video autoplay muted loop playsinline><source src="test1.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </source></video><!-- ⚠️ 若需 GIF，请取消下一行注释，并注释掉 video --><!-- <img src="test1.gif" alt="背景动画"> -->
</div>

    <!-- 动态生成垂直线（71 条，等间距） -->
    <script>
      const wrapper = document.getElementById('wrapper');
      const lineCount = 71;
      const gap = 100 / (lineCount - 1); // 百分比间距，适配任意宽度

      for (let i = 0; i < lineCount; i++) {
        const line = document.createElement('div');
        line.className = 'verticle-line';
        line.style.left = `${i * gap}%`;
        wrapper.appendChild(line);
      }
    </script>
</div>

✅ 核心要点说明：