为图片添加叠加背景层时出现占满窗口、遮挡文字的异常问题

问题根源 #

你遇到的两个问题核心原因如下：

• 父容器.container没有设置position: relative，绝对定位的元素默认会相对于根视口进行定位，所以你设置宽高100%的叠加层会直接铺满整个窗口，而不是只覆盖图片区域
• 文字的外层容器没有设置z-index，你把z-index:200写在了内层的文字div上，外层容器的层级默认低于叠加层的z-index:1，所以文字会被叠加层挡住
• 你的父容器没有设置尺寸适配规则，叠加层无法准确匹配图片的大小范围

修复后的完整代码 #

<div 
  className="container" 
  style={{ 
    padding: "30px",
    position: "relative",
    display: "inline-block"
  }}
>
  <img 
    style={{ borderRadius: "10px", display: "block" }} 
    src="dubai.png"
    alt="迪拜风景"
  />
  <div
    style={{
      background: "rgba(0, 0, 0, 0.5)",
      width: "100%",
      height: "100%",
      zIndex: 1,
      position: "absolute",
      top: 0,
      left: 0,
      borderRadius: "10px"
    }}
  ></div>
  <div
    style={{
      color: "#fff",
      position: "absolute",
      top: "20%",
      left: "50%",
      transform: "translateX(-50%)",
      fontFamily: "Roboto",
      width: "100%",
      zIndex: 2
    }}
  >
    <div style={{ fontSize: "35px", textAlign: "center" }}>
      DUBAI UAE
    </div>
  </div>
</div>

关键修改点说明 #

• 给父容器添加position: relative，让内部所有绝对定位元素都以父容器为基准偏移，不会跑出图片区域
• 父容器设置display: inline-block，让容器尺寸自动适配内部图片的大小，叠加层宽高100%就只会覆盖图片区域
• 叠加层简化定位逻辑，直接用top:0、left:0对齐父容器左上角，不需要用transform居中，同时添加和图片一致的圆角，避免边角漏出
• 给文字外层容器设置z-index: 2，层级高于叠加层的z-index:1，保证文字显示在最上层
• 调整文字的transform规则，只做水平居中，避免垂直方向偏移过多导致文字跑出图片区域

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