React项目如何单独调暗背景视频 不影响前景组件效果

暗化效果覆盖前景组件，核心是层级未做隔离：当前video标签为绝对定位但未指定层级，若直接在外层添加半透明蒙层、或使用全局混合模式，暗化层会与前景内容处于同级甚至更高层级，自然会将文字、图片组件一同染色。

要让暗化效果仅作用于视频，只需将视频和对应的暗化效果固定在页面最底层，所有前景内容层级高于背景层即可，无需改动业务组件逻辑。

1. 调整React组件结构 #

将视频和专属暗化蒙层统一放在独立的背景容器中，与前景内容容器平级，注意React中视频自动播放属性需要写为小驼峰格式autoPlay，否则属性不会生效：

import './App.css';
import Footer from './Components/Footer';
import Header from './Components/Header';
function App() {
  return (
    <>
      {/* 独立背景容器，所有暗化效果仅在该容器内部生效 */}
      <div className="bg-video-wrap">
        <video src="back.mp4" loop autoPlay muted></video>
        {/* 视频专属暗化蒙层 */}
        <div className="bg-mask"></div>
      </div>
      {/* 前景内容层，不受背景暗化影响 */}
      <div className='container'>
        <div className='container'>
          <Header />
          <Footer />
        </div>
      </div>
    </>
  );
}

2. 替换对应CSS样式 #

修正原有样式的无效属性，明确层级关系，暗化效果仅作用于背景容器内部：

/* 基础重置，避免默认边距出现多余滚动条 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 背景容器固定在页面最底层，占满全屏 */
.bg-video-wrap {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

/* 视频撑满容器，自适应裁剪不变形 */
.bg-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* 暗化蒙层，仅覆盖视频区域 */
.bg-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* 调整上方rgba最后一位数值即可控制暗度，值越大视频越暗 */
}

.container {
  padding: 3%;
  position: relative;
  min-height: 100vh;
}

如果不想额外增加蒙层标签，可以直接给video标签加CSS滤镜实现暗化：

.bg-video-wrap video {
  /* 其他原有样式保留 */
  filter: brightness(0.6);
  /* brightness取值0-1，数值越小视频越暗 */
}

这种方式滤镜仅作用于video元素本身，不会影响其他任何组件，效果和加蒙层一致。

注意：原有代码中video的height属性写为1fr是无效值，fr单位仅在Grid布局上下文内生效，使用object-fit: cover即可实现视频全屏铺满不变形的效果。不要在包裹了前景内容的父元素上添加半透明背景、混合模式、backdrop-filter属性，这类属性会直接影响子元素或覆盖范围内的内容。

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