全屏视频背景需用object-fit: cover保持比例，包裹在position: fixed容器中并设z-index: -1；居中内容须用position: absolute+transform: translate(-50%,-50%)且父容器设position: relative；加载时用占位图+canplay事件隐藏；z-index失效需检查层叠上下文。
全屏视频背景怎么设置才不拉伸变形
直接用 width: 100vw; height: 100vh; 给 <video> 设尺寸，大概率会压扁或拉长画面。关键不是“铺满”，而是“覆盖且保持比例”。object-fit: cover; 是必须的，它让视频等比缩放并裁剪填满容器，类似 CSS 的 background-size: cover;。
常见错误是只设 position: fixed; 却忘了加 top: 0; left: 0; z-index: -1;，结果视频被其他元素遮住，或者因为没重置 margin/padding 导致顶部留白。
-
<video>必须包裹在独立容器里（比如<div class="video-bg">），不要直接丢进<body> - 容器设
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -
<video>自身设width: 100%; height: 100%; object-fit: cover; - 记得加
autoplay muted loop属性，否则多数浏览器不自动播放
上面的按钮/文字怎么真正居中（不是靠 guess margin）
用 position: absolute; + transform: translate(-50%, -50%); 是最稳的方案。别信 top: 50%; left: 50% 就完事——那只是把元素左上角移到中心，实际视觉还是偏左上。
更麻烦的是：如果父容器没设 position: relative; 或 position: absolute;，absolute 元素会相对于 viewport 定位，一旦页面有滚动条，内容就飘走。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把要居中的元素包进一个
<div class="overlay">，这个容器设position: relative; width: 100%; height: 100vh; - 里面子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 如果内容是响应式（比如移动端字号变小），建议用
em或rem控制内边距，避免px在不同屏幕下显得太挤
视频加载时白屏/闪动怎么缓解
用户第一次访问时，<video> 还在加载，背景就成空白——尤其在移动网络下明显。单纯加 poster 属性只能解决首帧，无法掩盖解码延迟。
真正有效的做法是：用一张和视频首帧高度相似的 <img> 作占位，CSS 控制它和视频叠在一起，视频 ready 后用 JS 隐藏图片。
-
<img src="placeholder.jpg" alt="" class="video-placeholder">放在<video>同级，同样定位 - CSS 设
.video-placeholder { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } - JS 监听
video.addEventListener('canplay', () => { placeholder.style.display = 'none'; }); - 注意：poster 图片要压缩，不然比视频还慢，就本末倒置了
z-index 昏迷现场：为什么按钮点不了
看着按钮在视频上，鼠标 hover 没反应，控制台检查发现点击事件根本没触发——八成是 z-index 层级混乱。视频容器设了 z-index: -1，但它的父级（比如 <body>）可能有 overflow: hidden 或 transform: translateZ(0)，导致创建了新的层叠上下文，-1 反而盖住了所有东西。
- 确认视频容器的父级没有意外创建层叠上下文（查是否有
opacity < 1、filter、transform等） - 按钮所在容器的
z-index值必须比视频容器高，且两者要在同一层叠上下文中；最保险是把按钮容器也设position: relative;并给明确z-index - 移动端 Safari 对
z-index和fixed容器叠加特别敏感，必要时加-webkit-transform: translateZ(0);强制硬件加速
视频背景本身不复杂，但组合层叠、加载时机、设备兼容这三块最容易出 silent fail —— 调试时别只盯着居中代码，先看 computed styles 里的实际定位和层级。
