背景图片无法随表格同步滚动的技术问题求助

API 探路者

2026-8-22

问题解决：让背景图片随内容滚动到底部

问题根源

你当前的.bg::before用了绝对定位且无父级定位元素，所以它的高度只等于初始视口高度。当表格内容超过视口需要滚动时，伪元素不会跟着内容延伸，自然看不到背景跟着滚动到底部。

修复步骤

调整HTML结构：把所有内容（标题、下划线、表单）都放到.bg容器里，让.bg的高度由内部内容决定：

<body>
    <center>
        <div class="bg"> <!-- 包裹所有内容 -->
            <div id="heading">
                <h1>
                    Employee Details
                </h1>
            </div>
            <div id="underline">
                ==========================
            </div>
            <form>
                <!-- 原表单表格内容保持不变 -->
            </form>
        </div>
    </center>
</body>

修改CSS样式：

给.bg设置相对定位，让伪元素基于它定位；同时设置min-height:100vh保证至少覆盖视口高度
伪元素保持绝对定位，填满.bg的整个高度：

/* Background Image Styled */
.bg {
  position: relative;
  min-height: 100vh; /* 确保至少覆盖视口 */
}

.bg::before {
    background-image: url("pexels-eva-bronzini-7956852.jpg");
    background-size: 45% 100%;
    background-repeat: no-repeat;
    background-attachment: scroll; /* 现在会随内容滚动 */
    background-position: center;
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: -1;
    opacity: 1;
}