两个Div共享背景图实现求助：解决绝对定位背景图覆盖内容问题

想要实现背景图位于两个不同颜色div之间的视觉效果，使用absolute定位时出现背景图覆盖文本及其他div的问题。以下是极简示例代码：

<div style={{ positon: "relative", zIndex: 0 }}>
    <div style={{ backgroundColor: "red", height: 500, width: "100%" }}></div>
    <div style={{ backgroundColor: "blue", height: 500, width: "100%" }}></div>
    <div
        style={{
            backgroundRepeat: "no-repeat",
            backgroundPosition: "cover",
            backgroundImage: `url(${Squiggle1})`,
            height: 600,
            width: 451,
            position: "absolute",
            top: 250,
            bottom: 0,
            right: 0,
            zIndex: -1
        }}
    />
</div>

调试用的CodeSandbox项目已准备。

1. 修正核心拼写错误 #

父容器的positon是拼写错误，改为position: relative——这是绝对定位元素相对于父容器定位的必要前提，否则绝对定位元素会基于整个文档定位，而非目标父容器。

2. 调整结构与层级关系 #

要让背景图夹在红色和蓝色div之间，无需将背景图放在最后，直接插入到两个彩色div之间，同时通过zIndex明确层级：

• 红色div保持默认层级（无需额外设置zIndex）
• 背景图设置zIndex: 1，保留position: absolute
• 蓝色div设置position: relative和zIndex: 2，确保它在背景图上方

修改后的代码示例：

<div style={{ position: "relative", zIndex: 0 }}>
    <div style={{ backgroundColor: "red", height: 500, width: "100%" }}></div>
    {/* 将背景图div移至两个彩色div之间 */}
    <div
        style={{
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            backgroundImage: `url(${Squiggle1})`,
            height: 600,
            width: 451,
            position: "absolute",
            top: 250,
            right: 0,
            zIndex: 1
        }}
    />
    <div style={{ backgroundColor: "blue", height: 500, width: "100%", position: "relative", zIndex: 2 }}></div>
</div>

3. 关键细节修正 #

• 把backgroundPosition: "cover"改为backgroundSize: "cover"：backgroundPosition控制背景图的位置偏移，backgroundSize才是控制背景图缩放以覆盖容器的属性
• 移除bottom: 0：同时设置top和固定height会导致高度计算冲突，保留top: 250即可确定背景图的垂直位置
• 蓝色div必须设置position: relative：静态定位（默认）元素的zIndex属性不生效，设置相对定位后zIndex才能正常控制层级

替代方案：使用父容器伪元素 #

如果不想额外增加DOM标签，可利用父容器的:after伪元素实现背景图效果，结构更简洁：

.parent-container {
    position: relative;
    z-index: 0;
}

.parent-container:after {
    content: '';
    position: absolute;
    top: 250px;
    right: 0;
    width: 451px;
    height: 600px;
    background-image: url(${Squiggle1});
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
}

.red-div {
    background-color: red;
    height: 500px;
    width: 100%;
}

.blue-div {
    background-color: blue;
    height: 500px;
    width: 100%;
    position: relative;
    z-index: 2;
}

对应的JSX结构：

<div className="parent-container">
    <div className="red-div"></div>
    <div className="blue-div"></div>
</div>

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