如何让背景图片高度与div内容高度保持一致？

问题分析 #

你当前的#phase1box使用绝对定位，硬编码height:18%才能显示背景图，但设置height:auto时背景图消失，核心原因是：

• 绝对定位元素高度默认由内部内容撑开，但未配置合适的背景图显示属性（如background-size、background-repeat）时，元素高度自适应后背景图可能无法正常显示；
• 若内部元素存在脱离文档流的情况（比如浮动），会导致外层容器高度塌陷，进而背景图无显示空间。

方案一：直接给段落添加背景图（精准匹配段落高度） #

如果你只想让背景图覆盖<p>标签，直接给段落设置样式即可，高度会自动适配段落内容：

#phase1content p {
    background-image: url("../assets/phase1box.png");
    /* 调整背景图显示方式，按需选择 */
    background-size: cover; /* 覆盖整个段落区域 */
    background-repeat: no-repeat;
    background-position: center;
    /* 可选：添加内边距避免文字贴背景边缘 */
    padding: 10px 15px;
    /* 若需要半透明效果，可叠加rgba背景色（如果背景图本身不透明的话） */
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: overlay;
}

#phase1box {
    position: absolute;
    top: 0%;
    width: 100%;
    height: auto; /* 自适应内部内容高度 */
}

方案二：让外层容器背景图适配内容高度 #

如果需要背景图覆盖整个#phase1box（包含<h1>和<p>），调整以下样式即可：

#phase1box {
    position: absolute;
    top: 0%;
    width: 100%;
    height: auto;
    min-height: fit-content; /* 确保容器高度至少容纳内部内容 */
    background-image: url("../assets/phase1box.png");
    background-size: 100% 100%; /* 背景图完全覆盖容器 */
    background-repeat: no-repeat;
    background-position: center;
}

#phase1content {
    padding: 15px; /* 可选：避免内容与容器边缘紧贴 */
}

额外注意事项 #

• 如果内部元素使用了浮动，需给#phase1box添加overflow: hidden来清除浮动，避免容器高度塌陷；
• 若背景图半透明效果需求是让背景图本身透明，确保图片文件本身是带alpha通道的PNG/WebP格式即可。

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