本文讲解如何通过分离背景容器与主体内容，使网页首屏显示背景图，而滚动后呈现纯白背景，解决因背景直接设在 body 上导致无法延伸滚动的问题。
本文讲解如何通过分离背景容器与主体内容，使网页首屏显示背景图，而滚动后呈现纯白背景，解决因背景直接设在 body 上导致无法延伸滚动的问题。
要实现“背景图仅覆盖首屏，向下滚动后显示纯白背景”的效果，关键在于避免将背景图直接应用在 body 元素上。当前代码中 body { background: url(...) } 会导致背景随整个文档高度平铺或拉伸，且 min-height: 100vh 仅保证最小视口高度，但无法自然过渡到无背景的后续区域——因为 body 的背景会持续渲染，遮盖后续白色内容。
✅ 正确做法是：将背景图限定在独立的首屏容器内，让主体内容（如 .box）脱离该背景影响，自由延展并呈现自身背景色。
✅ 推荐结构与样式改造
<!-- 首屏背景容器（仅占 100vh） -->
<div class="hero-background"></div>
<!-- 可滚动的主体内容区域 -->
<div class="main-content">
<header class="header"><a href="" class="logo">Pizza&Pasta Lina</a>
<nav class="navbar"><a href="">Home</a>
<a href="">Speisekarte</a>
<a href="">Bilder</a>
<a href="">Kontakt</a>
</nav></header><div class="box">
<p>此处为可滚动的白色内容区域 —— 滚动后即显示纯白背景</p>
</div>
</div>
/* 重置基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 首屏背景容器：固定高度为视口全高，覆盖背景图 */
.hero-background {
height: 100vh;
background: url('https://picsum.photos/2000/1200') no-repeat center center;
background-size: cover;
position: relative;
/* 可选：添加半透明遮罩提升文字可读性 */
&::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.2);
}
}
/* 主体内容区域：默认白色背景，可自然滚动 */
.main-content {
background-color: white; /* ✅ 真正决定滚动区背景色 */
min-height: 100vh; /* 确保至少一屏高，但允许超出 */
}
/* 原有样式微调（移除 body 背景，修正 .box 定位） */
.header {
padding: 20px 100px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0px 11px 20px 3px rgba(255, 255, 255, 0.76);
position: relative; /* 避免被 hero-background 遮挡 */
z-index: 10;
}
.text1 {
position: absolute; /* 改为 absolute，相对于 .hero-background 定位 */
top: 325px;
left: 150px;
width: 500px;
font-size: 25px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
color: white;
background-color: rgba(128, 128, 128, 0.3);
border-radius: 15px;
padding: 19px;
}
.box {
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 30px;
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
⚠️ 关键注意事项
-
不要给
body设置背景图：否则它会全局生效，无法实现“背景仅限首屏”； -
.hero-background必须是独立块级元素，且高度设为100vh，不使用position: fixed（否则会脱离文档流，影响后续布局）； -
.main-content需显式声明background-color: white—— 这才是滚动区域的实际背景； - 若需
.text1等元素叠加在背景图上，请用position: absolute并确保其父容器（如.hero-background）具有position: relative； - 图片建议使用宽高比合理、分辨率足够的素材（如
2000×1200），避免cover模式下严重裁剪。
通过这种结构解耦，你既能精准控制首屏视觉冲击力，又能保障后续内容拥有干净、可扩展的白色画布——真正实现“所见即所得”的滚动体验。
