通过为标题元素设置底部外边距或内边距，可确保后续 `
` 内容自然出现在背景图可视区域之后，避免文字与背景图重叠。
在你的当前结构中，<h1> 和 <p> 元素默认是流式布局（block-level），但背景图是作用于 body 的——它不会自动“撑高”容器，也不会影响文档流。因此，即使背景图高度为 600px，浏览器仍会从页面顶部开始渲染 <h1>，导致 <p> 文字直接叠加在背景图上（尤其当背景图未覆盖整个视口时）。
✅ 正确解法：用 CSS 为 <h1> 添加足够的底部空白，使其“推开”后续段落，使之落在背景图视觉结束位置之后。
推荐使用基于视口的单位（如 vh）或百分比（%），以适配不同屏幕尺寸。例如：
h1 {
margin-bottom: 30vh; /* 推动后续内容下移至背景图下方 */
}或者，如示例中所用（需确保父容器有明确高度）：
h1.heading {
margin-bottom: 18%; /* 百分比基于包含块高度，适用于 body 高度已知场景 */
}⚠️ 注意事项：
- 不要给 body 设置 height: 100vh 后再用 % —— 这可能导致计算异常；更稳妥的是用 vh 直接控制；
- 若背景图高度固定（如 header.jpg 为 720px），也可用 margin-bottom: 720px，但缺乏响应性；
- 更现代、语义化的方式是将背景图移入独立的 header 区块，并用 min-height 明确其高度，再自然触发流式布局：
<header style="min-height: 100vh; background: url('https://sputnick.fr/header.jpg') no-repeat center/cover;"></header>
<h1>foobar</h1>
<p>lorem ipsum doloris</p>
<!-- 后续内容自动位于 header 之后 -->这种结构更清晰、可维护性强，也便于后续添加导航栏、渐变遮罩等增强效果。
总结：纯靠 body 背景图无法驱动文档流，必须通过显式留白（margin / padding）或结构重构（引入 header 容器）来实现“段落位于背景图之后”的视觉目标。优先推荐 vh 单位 + 语义化布局，兼顾简洁性与响应性。
