如何为banner横幅图片添加白色半透明覆盖层？现有代码未生效

• 层级结构顺序错误，导致遮罩层无法覆盖背景图：你当前的DOM结构是遮罩层（overlayOnBanner）作为父元素包裹背景层（banner），且你将半透明背景色定义在遮罩层、背景图定义在内部的banner元素上。根据DOM元素的默认层叠规则，内部子元素会渲染在父元素上层，因此banner的背景图会完全盖住父元素的半透明背景，遮罩效果完全失效。
• 无效属性冗余：overlayOnBanner样式中定义的backgroundSize属性无效，该属性仅作用于背景图片，你给遮罩层设置的是纯色背景，该属性可以直接删除。
• 适配隐患：遮罩层使用height: 100%的规则存在适配风险，如果后续修改内部banner的高度规则，而overlayOnBanner的父元素.App没有显式设置高度，百分比高度会失效导致遮罩层高度异常。

方案1：调整DOM结构（推荐） #

把背景图层放在外层，遮罩层放在背景图内部即可正常实现效果，修改后代码如下：

import bannerimage from "./assets/images/bg-banner.jpeg";
function App() {
  const overlayOnBanner = {
    width: '100%',
    height: '100%',
    background: "rgba(229,229,229,0.3)",
  };

  const banner = {
    width: '100%',
    height: '800px',
    backgroundImage: `url(${bannerimage})`,
    backgroundSize: 'cover'
  };

  return (
    <div className="App">
      <div style={banner}>
        <div style={overlayOnBanner}>
          {/*  banner区域的内容直接放在该容器内即可 */}
        </div>
      </div>
    </div>       
  );
}

export default App;

方案2：不调整DOM结构，通过定位修改层叠顺序 #

如果需要保持现有结构，可通过定位规则修改元素层叠层级，修改后样式代码如下：

const overlayOnBanner = {
  width: '100%',
  height: '800px', // 直接固定高度和banner保持一致，避免百分比高度失效问题
  background: "rgba(229,229,229,0.3)",
  position: 'relative'
};

const banner = {
  width: '100%',
  height: '100%',
  backgroundImage: `url(${bannerimage})`,
  backgroundSize: 'cover',
  position: 'absolute',
  zIndex: -1,
  top: 0,
  left: 0
};

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