通过为标题元素设置合适的下边距（margin-bottom），可确保所有段落内容自然出现在背景图片的可视区域下方，而无需改变html结构或使用复杂定位。

在当前布局中，

元素默认紧贴页面顶部，而背景图（background-image）铺满整个 区域。由于背景图本身不占据文档流空间，浏览器无法自动感知其“高度”，因此后续

元素会从

下方立即开始排列——这往往导致文字叠加在背景图上，而非“位于图片之后”。

解决方案：为

最简洁、语义清晰且兼容性良好的做法是：给

添加一个 class=”heading”，并为其设置基于视口高度的 margin-bottom（如 margin-bottom: 25vh），而非固定像素或百分比（原答案中的 18% 是相对于父容器高度的百分比，在 中行为不稳定，推荐使用 vh 单位）：

foobar
lorem ipsum doloris

							

								
								

									Memories.ai
									
专注于视频解析的AI视觉记忆模型
								
								下载 
							
						
lorem ipsum doloris

body {
  background-color: #15141A;
  background-image: url("https://sputnick.fr/header.jpg");
  background-size: cover;        /* 确保图片覆盖全屏 */
  background-position: center;   /* 居中显示关键内容 */
  color: white;
  font-family: "Arial", sans-serif;
  font-size: 16px;
  margin: 0; /* 重置默认 body margin，避免额外空白 */
}

.heading {
  margin-bottom: 25vh; /* 推荐：25% 视口高度，适配不同屏幕 */
  /* 可选：添加 text-align、padding 等增强可读性 */
  text-align: center;
  padding-top: 8vh;
}

✅ 为什么推荐 vh 而非 %？

• % 在 body 上计算时依赖于父元素（即 html）的高度，若未显式设置 html { height: 100%; }，结果不可靠；
• vh（viewport height）直接基于浏览器窗口高度，语义明确、响应性强，且无需额外样式约束。

⚠️ 注意事项：

• 若背景图高度固定（如 600px），也可用 margin-bottom: 600px，但缺乏响应性；
• 避免对 使用 padding-bottom —— 它会影响整个页面底部留白，且可能触发不必要的滚动条；
• 始终配合 background-size: cover 和 background-position，确保关键内容（如标题）在各类设备上可见。

该方法零 JavaScript、无绝对定位、不破坏文档流，是实现“内容置于背景图之后”这一常见设计需求的专业级 CSS 实践。

https://www.php.cn/faq/2019269.html