文本显示在背景图片下方（而非覆盖其上） ” />

通过为 `

` 添加底部外边距（`margin-bottom`）或内边距（`padding-bottom`），并结合背景图高度合理设置百分比或像素值，可确保后续 `

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

要实现

文本严格位于背景图像可视区域的正下方（即不被背景图遮挡、也不提前溢出），关键在于：背景图仅作用于 body，而内容流仍按标准文档流排布；因此需主动为首个内容元素（如

。

最直接、语义清晰且兼容性好的方案是——为

设置 margin-bottom，其值应大致等于背景图的高度（或视口高度的合理比例）。例如：

h1 {   margin-bottom: 100vh; /* 推荐：使 
 底部对齐视口底部 */   /* 或使用固定像素（若背景图高度已知）： */   /* margin-bottom: 600px; */ }

foobar
 
lorem ipsum doloris
 
lorem ipsum doloris

⚠️ 注意事项：

• 避免使用 padding-bottom 替代 margin-bottom，否则会扩大
  

  自身占据的空间，可能引发不必要的行高或背景色干扰；

• 百分比单位（如 margin-bottom: 18%）基于父容器（body）宽度计算，非高度，易导致响应异常；推荐优先使用 vh（视口高度单位）或 px（当背景图尺寸固定时）；
• 若需更精准控制（如适配不同屏幕），可结合 css 自定义属性与 @media 查询动态调整；
• 确保 body 无默认 margin 或 padding 干扰布局（建议重置：body { margin: 0; }）。

✅ 总结：这不是“将

定位到图片后”，而是通过首屏标题的外边距，为背景图预留视觉空间，使后续段落自然流入其下方——这是符合语义化 html 与流式布局原则的稳健解法。