React项目中div背景图片无法在子元素后方显示的问题

AI 小北

2026-7-19

问题解决：子元素后方不显示父元素背景图

你的问题核心出在.firstContainer的z-index: -1属性上：

父元素.start默认是position: static，此时子元素设置z-index: -1会让它的层级低于父元素，导致子容器被挤到父元素下层，显示的是body的白色背景，而非父元素的背景图。
另外.start里重复设置了background-size，后者会覆盖前者，建议统一配置。

修改后的CSS代码：

.start {
    height: 100vh;
    background-image: url("../../public/main2.jpg");
    background-size: cover; /* 保留一个即可，cover会让图片完整覆盖容器且不变形 */
    background-repeat: no-repeat;
}

.firstContainer {
    padding-left: 50px;
    width: 50vw;
    /* 移除z-index: -1 */
    color: white; /* 可选：若背景图偏深，设置文字为白色提升可读性 */
}

.subheading-div1 {
    font-size: 1.7rem;
    margin: 0px;
}

.home-heading {
    font-size: 3rem;
    margin: 20px;
    margin-bottom: 0px;
}

.greenText {
    color: #79ca5d;
}

.desc-div1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 20px;
}

.btn-div {
    background-color: transparent;
    display: inline-block;
    width: 68.46px;
    height: 51.86px;
    border-radius: 5px;
    margin: 20px 20px 0 0;
    border: 1px solid #79ca5d;
}

.btn-div:hover {
    background-color: #79ca5d;
}

.btn {
    color: #fff;
    padding-right: 20px;
    width: 45px;
    height: 45px;
    padding-left: 10px;
    padding-top: 5px;
}