网页视频背景未全屏覆盖，如何实现铺满整个页面？

阿华AIGC实验室

2026-5-27

解决全屏视频背景覆盖整个页面的问题

我来帮你搞定这个全屏视频背景的问题！咱们先捋清楚为啥现在视频只覆盖头部：你把视频放在了<header>标签里，而你的CSS给<header>设了height: 100vh，这就意味着它只占当前视口的高度，下面的<p>元素不在这个容器里，自然就看不到视频背景啦。

下面是调整后的完整代码，能实现视频全屏覆盖整个页面，同时让其他内容正常显示在视频上方：

修改后的HTML代码

<video loop muted autoplay playsinline poster="">
  <source src="https://www.gordonmac.com/wp-content/uploads/storm-1.mp4" type="video/mp4">
  <source src="http://freshsauce.test/video/FS Website-FINAL-PRORES.mov" type="video/mov">
</video>
<header>
  <div class="banner">
    <div class="banner-text">
      Header Text Here
    </div>
  </div>
</header>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>
<p>yoooooo</p>

修改后的CSS代码

body{ 
  margin:0;
  /* 确保body高度能撑满内容，避免视频只覆盖视口 */
  min-height: 100vh;
}

/* 全局视频背景设置 */
video {
  position: fixed; /* 固定定位，始终覆盖视口 */
  top: 50%;
  left: 50%;
  z-index: -100; /* 层级设为最低，让其他内容在上面 */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

header {
  position: relative;
  /* 移除100vh高度，让header高度由内容决定 */
  width: 100%;
  text-align: center;
  padding: 2rem 0; /* 给header加些内边距，让内容不贴边 */
  z-index: 1; /* 确保header内容在视频上方 */
}

/* 可以给文字加个半透明背景，提升可读性 */
.banner-text {
  background-color: rgba(0,0,0,0.5);
  color: white;
  padding: 1rem;
  display: inline-block;
}

/* 给段落文字也加个样式，提升可读性 */
p {
  color: white;
  padding: 0 1rem;
  z-index: 1;
  position: relative;
}