React.js + Styled Components 视频遮罩失效问题排查

尝试为背景播放的视频添加遮罩层，但遮罩始终无法显示。需求是给视频添加深色遮罩，以便在视频上方放置文本。相关代码如下（注：在多个组件中设置背景色是为了调试遮罩显示）：

import React from 'react'; 
import styled from 'styled-components'; 
import VideoBg from '../assets/landing-page-video-1.webm';

const Home = () => {
  return ( 
    <VideoContainer> 
        < Overlay className="overlay">  
         <video className="BgVideo"src={VideoBg} autoPlay loop muted />  
         </Overlay> 
     
    </VideoContainer> 
    
  )
}

const Overlay = styled.div `
 & .overlay{
    z-index: 1; 
    position: absolute; 
    width: 100%;
    height: 100%; 
    top: 0;  
    left: 0;  
    background-color: rgba(0,0,0,.1) !important;

    
 }
`

const VideoContainer = styled.div ` 
& .BgVideo{  
    z-index: 1;
    bottom:0; 
    top:0; 
    right:0; 
    left:0; 
    width: 100Vw; 
    height: 100vh; 
    object-fit: cover; 
    object-position: center; 
    margin-top: 0;  
    position:fixed;     
    background-color: rgba(0,0,0,.1) !important;

};  
bottom:0; 
left:0; 
margin: 0; 
padding: 0; 
font-family: Impact; 
min-width: 100%; 
min-height: 100vh; 
right:0; 
top:0; 
z-index: -1; 
background-color: rgba(0,0,0,.1) !important;`

• 样式选择器错误：Overlay组件的样式里用了& .overlay，这是给子元素中带有.overlay类的元素设置样式，但实际上Overlay本身就是需要加遮罩的div，正确写法应该直接给组件本身设置样式，不需要嵌套选择器。
• z层级冲突：视频的z-index设为1，遮罩的z-index同样是1，且视频是fixed定位，会覆盖在遮罩上方。遮罩需要更高的z-index才能显示在视频之上。
• 定位上下文缺失：Overlay组件没有设置position: relative，导致内部绝对定位的元素会以整个文档为基准，而非以Overlay为容器。

import React from 'react'; 
import styled from 'styled-components'; 
import VideoBg from '../assets/landing-page-video-1.webm';

const Home = () => {
  return ( 
    <VideoContainer> 
      <VideoWrapper>
        <BgVideo src={VideoBg} autoPlay loop muted />  
        <Overlay /> {/* 遮罩层与视频同级，放在视频上方 */}
      </VideoWrapper>
    </VideoContainer> 
  )
}

// 遮罩层样式：绝对定位覆盖整个容器，深色半透明背景，z-index高于视频
const Overlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 加深透明度，更适配文本展示 */
  z-index: 2;
`;

// 视频容器：提供相对定位上下文，让内部绝对定位元素以它为基准
const VideoWrapper = styled.div`
  position: relative;
  width: 100vw;
  height: 100vh;
`;

const VideoContainer = styled.div`
  margin: 0;
  padding: 0;
  min-width: 100%;
  min-height: 100vh;
  font-family: Impact;
`;

const BgVideo = styled.video`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  z-index: 1; /* 视频z-index低于遮罩，保证遮罩在上方 */
`;

1. 调整结构：将遮罩层Overlay与视频放在同一个VideoWrapper容器中，容器设置position: relative，确保遮罩的绝对定位基于该容器。
2. 修正样式选择器：Overlay组件直接设置自身样式，移除错误的嵌套选择器。
3. 调整z层级：视频z-index设为1，遮罩z-index设为2，确保遮罩显示在视频上方。
4. 优化样式结构：将视频样式单独抽成BgVideo组件，提升代码可读性。
5. 优化遮罩效果：加深遮罩透明度至rgba(0,0,0,0.5)，让上方文本更清晰可读。

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