父容器背景图未在子div上方显示的问题排查求助

核心问题 #

父容器背景图无法显示，主要源于两个关键原因：

1. 子元素about-us-section和contact-us都设置了完全不透明的背景色，直接覆盖了父容器的背景图；
2. 父容器的background-size属性重复定义，后面的contain会覆盖前面的100%，属于冗余代码。

额外需要确认图片路径：如果style.css放在单独的css文件夹中，图片路径应改为../images/ourboardvector.png（先回到根目录再定位images文件夹），否则会出现图片找不到的情况。

解决方案（两种可选） #

方案一：让背景图悬浮在子元素上方（推荐）

给父容器添加伪元素来承载背景图，并设置更高层级，实现背景图显示在两个子区块上方的效果：

.aboutus-contact-us-wrapper {
  width: 100%;
  position: relative;
  /* 移除原有的background相关属性，统一移到伪元素中 */
}

/* 用伪元素实现悬浮背景图 */
.aboutus-contact-us-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('./images/ourboardvector.png'); /* 确认路径正确性 */
  background-size: contain;
  background-position: right;
  z-index: 10; /* 确保层级高于子元素 */
  pointer-events: none; /* 不干扰子元素的点击、输入等交互 */
}

/* 显式设置子元素层级，确保低于伪元素 */
.about-us-section, .contact-us {
  position: relative;
  z-index: 1;
}

方案二：降低子元素背景透明度

如果不需要子区块完全不透明，可以将背景色改为半透明的rgba格式，让父容器背景图透出来：

.about-us-section {
  /* 保留原有其他属性 */
  background-color: rgba(241, 241, 241, 0.8); /* 最后一个数值为透明度，0-1之间调整 */
}

.contact-us {
  /* 保留原有其他属性 */
  background-color: rgba(24, 31, 43, 0.8);
}

另外，contact-us中重复书写了position: relative，可以删除其中一个，保持代码简洁。

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