如何使用Chakra UI的_after伪类在Hero区视频前添加深色遮罩层？

你当前的代码里，_after伪元素的样式缺少几个关键属性，导致遮罩层没有正确显示。要让遮罩层覆盖在视频上方，需要给伪元素设置内容占位、绝对定位以及占满父容器的样式。

修改后的完整代码 #

import { Box, Button, useRef, useEffect } from '@chakra-ui/react';

function Hero() {
    const videoRef = useRef();

    useEffect(() => {
        setTimeout(() => {
            videoRef.current.play()
        }, 1000)
    }, []);

    return (
        <Box 
            display="flex" 
            alignItems="flex-end" 
            justifyContent="center"
            width="100%"
            height="100%"
            position="relative" {/* 让内部绝对定位元素基于此容器 */}
        >
            <Box
                position="relative"
                top="0"
                left="0"
                width="100%"
                height="100%"
                zIndex="10"
                _after={{
                    content: '""', // 伪元素生效的必要属性
                    position: "absolute",
                    inset: 0, // 占满父容器的快捷写法，等价于top/left/right/bottom:0
                    bgGradient:"linear(180deg, rgba(6, 0, 11, 0.29) 70.65%, #06000B 100%)",
                    zIndex: 1 // 确保遮罩位于视频上方
                }}
            >
                <video 
                    ref={videoRef}
                    loop 
                    autoplay
                    muted 
                    preload="auto"
                    style={{ width: "100%", height: "100%", objectFit: "cover" }} // 视频按比例铺满容器
                >
                    <source src="/hero.mp4" type="video/mp4"/>
                </video>
            </Box>
            
            <Button 
                variant="outline" 
                color="#f3f3f3"
                position="absolute"
                zIndex="20"
                marginBottom="50px"
                bgGradient="linear(91.32deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 98.96%)"
                _hover={{
                    bgGradient:'linear(to-r, rgba(2, 43, 67, 1), rgba(41, 128, 185, 0.64))', 
                    boxShadow:"4px 4px 30px -1px rgba(41, 128, 185, 0.72)",
                }} 
            >
                CONHEÇA A COMUNIDADE
            </Button>
        </Box>
    )
}

export default Hero;

关键修改说明 #

• 给最外层Box添加position="relative"，确保按钮的绝对定位基于整个英雄区域
• 给包裹视频的Box设置width="100%"和height="100%"，让视频容器铺满父元素
• 完善_after伪元素样式：
  • 必须添加content: '""'，这是CSS伪元素生效的核心前提
  • 用position: "absolute"和inset: 0让遮罩层完全覆盖视频容器
  • 设置zIndex: 1保证遮罩在视频上方（视频默认z-index为0）
• 给视频添加objectFit: "cover"，避免视频拉伸变形，保持比例铺满容器

这样修改后，遮罩层就会正确显示在视频上方，匹配你Figma中的设计效果。

内容的提问来源于stack exchange，提问作者Carlos Henrique R. Pereira