通过为标题元素设置合适的下边距（margin-bottom），可确保所有段落内容自然出现在背景图片的可视区域下方，而无需改变html结构或使用复杂定位。
在当前布局中，<h1> 元素默认紧贴页面顶部，而背景图（background-image）铺满整个 <body> 区域。由于背景图本身不占据文档流空间，浏览器无法自动感知其“高度”，因此后续 <p> 元素会从 <h1> 下方立即开始排列——这往往导致文字叠加在背景图上，而非“位于图片之后”。
解决方案：为 <h1> 添加响应式下边距，模拟背景图的视觉高度
最简洁、语义清晰且兼容性良好的做法是：给 <h1> 添加一个 class="heading"，并为其设置基于视口高度的 margin-bottom（如 margin-bottom: 25vh），而非固定像素或百分比（原答案中的 18% 是相对于父容器高度的百分比，在 <body> 中行为不稳定，推荐使用 vh 单位）：
<h1 class="heading">foobar</h1> <p>lorem ipsum doloris</p> <p>lorem ipsum doloris</p> <!-- 更多段落 -->
body {
background-color: #15141A;
background-image: url("https://sputnick.fr/header.jpg");
background-size: cover; /* 确保图片覆盖全屏 */
background-position: center; /* 居中显示关键内容 */
color: white;
font-family: "Arial", sans-serif;
font-size: 16px;
margin: 0; /* 重置默认 body margin，避免额外空白 */
}
.heading {
margin-bottom: 25vh; /* 推荐：25% 视口高度，适配不同屏幕 */
/* 可选：添加 text-align、padding 等增强可读性 */
text-align: center;
padding-top: 8vh;
}✅ 为什么推荐 vh 而非 %？
- % 在 body 上计算时依赖于父元素（即 html）的高度，若未显式设置 html { height: 100%; }，结果不可靠；
- vh（viewport height）直接基于浏览器窗口高度，语义明确、响应性强，且无需额外样式约束。
⚠️ 注意事项：
- 若背景图高度固定（如 600px），也可用 margin-bottom: 600px，但缺乏响应性；
- 避免对 <body> 使用 padding-bottom —— 它会影响整个页面底部留白，且可能触发不必要的滚动条；
- 始终配合 background-size: cover 和 background-position，确保关键内容（如标题）在各类设备上可见。
该方法零 JavaScript、无绝对定位、不破坏文档流，是实现“内容置于背景图之后”这一常见设计需求的专业级 CSS 实践。
