如何在Tailwind CSS视频背景上方叠加pattern图案

核心实现逻辑为分层独立控制视频、图案、页面内容的定位与层级，避免样式冲突导致的位置异常，具体实现步骤如下：

• 定义全屏外层容器，设置相对定位作为所有子元素的定位基准
  对应类名：relative w-full h-screen overflow-hidden
• 放置视频背景层，绝对定位占满容器，层级设为最低
  对应类名：absolute inset-0 w-full h-full object-cover z-0，其中object-fit: cover可保证视频不变形铺满全屏
• 叠加 Pattern 图案层，同样绝对定位占满容器，层级高于视频、低于页面内容
  直接将你导出的 Pattern 图案设为该层背景即可，无需额外调整位置，示例类名：absolute inset-0 z-1 bg-[url('你的Pattern图案地址')] bg-repeat bg-opacity-40
  若需要调整图案和视频的融合效果，可追加混合模式类，比如 mix-blend-mode-overlay、mix-blend-mode-soft-light
• 放置页面内容（文字、按钮等），层级设为最高，示例类名：relative z-10，加 relative 是为了让 z-index 生效，无需修改默认定位

完整代码示例 #

<!-- 外层容器 -->
<div class="relative w-full h-screen overflow-hidden">
  <!-- 视频背景层 -->
  <video autoplay muted loop playsinline class="absolute inset-0 w-full h-full object-cover z-0">
    <source src="你的视频文件地址" type="video/mp4">
  </video>
  <!-- Pattern叠加层 -->
  <div class="absolute inset-0 z-1 bg-[url('你的Pattern图案地址')] bg-repeat bg-opacity-30"></div>
  <!-- 页面内容层 -->
  <div class="relative z-10 h-full flex flex-col items-center justify-center text-white">
    <h1 class="text-5xl font-bold">页面标题</h1>
    <p class="mt-4 text-xl">页面描述内容</p>
  </div>
</div>

可选简化方案（无需额外DOM节点） #

如果不想多写一个 Pattern 层的 div，可通过父容器的 before 伪类实现，给外层容器追加以下类即可：
before:absolute before:inset-0 before:z-1 before:bg-[url('你的Pattern图案地址')] before:bg-repeat before:bg-opacity-30 before:content-['']

常见位置异常问题排查 #

• 外层容器未加 relative：会导致 Pattern 层的绝对定位相对于整个文档流，出现位置偏移
• Pattern 层未加 inset-0：没有铺满整个外层容器，会出现图案只显示一部分或者平铺错位
• 层级设置错误：Pattern 层 z-index 低于视频会被挡住，高于内容层会盖住文字

内容的提问来源于stack exchange，提问作者Oskar