如何使用ReactJS为图片创建全屏覆盖层？

你的核心问题是绝对定位的元素没有以图片容器为参照，同时覆盖层的尺寸没有匹配图片。以下是修改后的代码和关键点说明：

关键点修正： #

• 给图片的父容器添加 position: relative，让绝对定位的覆盖层以它为基准
• 让覆盖层的宽高设为 100%，完全填充父容器
• 调整覆盖层的内容居中样式，提升视觉效果

修改后的完整代码： #

import React from 'react';
import { Container } from '@mui/material';
import Grid from '@mui/material/Unstable_Grid2';

export function App(props) {
  return (
    <div className='App'>
      <Grid container>
        <Grid>
          <h1>Do not hide me.</h1>
        </Grid>
        <Grid>
          {/* 给Container添加相对定位，作为绝对定位元素的参照 */}
          <Container
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'blue',
              position: 'relative', // 关键：添加相对定位
              display: 'inline-block', // 让容器宽度匹配图片宽度
            }}
          >
            <img
              style={{
                maxHeight: 300,
                display: 'block', // 去除图片默认的底部间隙
                width: '100%', // 图片宽度自适应容器
              }}
              src={
                'https://images.unsplash.com/photo-1518133910546-b6c2fb7d79e3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80'
              }
              alt='img'
            ></img>
            {/* 覆盖层：绝对定位+宽高100%填充容器 */}
            <h1
              style={{
                position: 'absolute',
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                opacity: 0.7,
                backgroundColor: 'red',
                margin: 0, // 清除默认margin
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center', // 内容垂直水平居中
              }}
            >
              Hi there, this text should be only over the image.
            </h1>
          </Container>
        </Grid>
      </Grid>
    </div>
  );
}

// Log to console
console.log('Hello console');

额外说明： #

• 使用 display: inline-block 让Container的宽度自动匹配图片宽度，避免覆盖层超出图片范围
• 给图片添加 display: block 消除图片底部的默认空白间隙
• 覆盖层用 left/right/top/bottom: 0 替代固定宽度，确保完全覆盖容器（即图片）

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