文本显示在背景图片下方（而非覆盖其上）
" />
通过为 `
` 添加底部外边距（`margin-bottom`）或内边距（`padding-bottom`），并结合背景图高度合理设置百分比或像素值，可确保后续 `
` 元素自然出现在背景图可视区域之后，避免文字与背景图重叠。
要实现
文本严格位于背景图像可视区域的正下方（即不被背景图遮挡、也不提前溢出），关键在于：背景图仅作用于 body，而内容流仍按标准文档流排布；因此需主动为首个内容元素（如 ）预留足够垂直空间，使其“撑开”背景图所占的视觉区域
。
最直接、语义清晰且兼容性好的方案是——为
设置 margin-bottom，其值应大致等于背景图的高度（或视口高度的合理比例）。例如：h1 {
margin-bottom: 100vh; /* 推荐：使 底部对齐视口底部 */
/* 或使用固定像素（若背景图高度已知）： */
/* margin-bottom: 600px; */
}
foobar
lorem ipsum doloris
lorem ipsum doloris
底部对齐视口底部 */ /* 或使用固定像素（若背景图高度已知）： */ /* 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 与流式布局原则的稳健解法。
