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

通过为 `

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

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

要实现 <p> 文本严格位于背景图像可视区域的正下方（即不被背景图遮挡、也不提前溢出），关键在于：背景图仅作用于 body，而内容流仍按标准文档流排布；因此需主动为首个内容元素（如 <h1>）预留足够垂直空间，使其“撑开”背景图所占的视觉区域。

最直接、语义清晰且兼容性好的方案是——为 <h1> 设置 margin-bottom，其值应大致等于背景图的高度（或视口高度的合理比例）。例如：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

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

<h1 class="heading">foobar</h1>
<p>lorem ipsum doloris</p>
<p>lorem ipsum doloris</p>
<!-- 后续段落将自然出现在背景图下方 -->

⚠️ 注意事项：

• 避免使用 padding-bottom 替代 margin-bottom，否则会扩大 <h1> 自身占据的空间，可能引发不必要的行高或背景色干扰；
• 百分比单位（如 margin-bottom: 18%）基于父容器（body）宽度计算，非高度，易导致响应异常；推荐优先使用 vh（视口高度单位）或 px（当背景图尺寸固定时）；
• 若需更精准控制（如适配不同屏幕），可结合 CSS 自定义属性与 @media 查询动态调整；
• 确保 body 无默认 margin 或 padding 干扰布局（建议重置：body { margin: 0; }）。

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