通过为标题元素设置底部外边距或内边距，可确保后续 `

` 内容自然出现在背景图可视区域之后，避免文字与背景图重叠。

在你的当前结构中，

和

元素默认是流式布局（block-level），但背景图是作用于 body 的——它不会自动“撑高”容器，也不会影响文档流。因此，即使背景图高度为 600px，浏览器仍会从页面顶部开始渲染

，导致

文字直接叠加在背景图上（尤其当背景图未覆盖整个视口时）。

✅ 正确解法：用 CSS 为

添加足够的底部空白，使其“推开”后续段落，使之落在背景图视觉结束位置之后

。

推荐使用基于视口的单位（如 vh）或百分比（%），以适配不同屏幕尺寸。例如：

h1 {
  margin-bottom: 30vh; /* 推动后续内容下移至背景图下方 */
}

或者，如示例中所用（需确保父容器有明确高度）：

h1.heading {
  margin-bottom: 18%; /* 百分比基于包含块高度，适用于 body 高度已知场景 */
}

⚠️

注意事项：

• 不要给 body 设置 height: 100vh 后再用 % —— 这可能导致计算异常；更稳妥的是用 vh 直接控制；
• 若背景图高度固定（如 header.jpg 为 720px），也可用 margin-bottom: 720px，但缺乏响应性；
• 更现代、语义化的方式是将背景图移入独立的 header 区块，并用 min-height 明确其高度，再自然触发流式布局：

foobar
lorem ipsum doloris

这种结构更清晰、可维护性强，也便于后续添加导航栏、渐变遮罩等增强效果。

总结：纯靠 body 背景图无法驱动文档流，必须通过显式留白（margin / padding）或结构重构（引入 header 容器）来实现“段落位于背景图之后”的视觉目标。优先推荐 vh 单位 + 语义化布局，兼顾简洁性与响应性。