背景图与文字重叠的本质是定位未分离，解决关键是“分离渲染层”或“预留内容空间”；推荐用padding留白、background-attachment:fixed配合min-height:100vh，或伪元素::before独立承载背景图。
背景图和文字挤在一起，本质是定位没控制好
HTML 里背景图和文字重叠，不是“图片盖住了字”或“字压在图上”这种表象问题，而是 background-image 默认不占布局空间，而文字内容（比如 <p></p>、<h1></h1>）按正常文档流渲染，两者在同一个块级容器里自然就叠了。关键不在“加间距”，而在“分离渲染层”或“预留内容空间”。
用 padding 给文字腾出安全区域
最直接、兼容性最好、也最不容易出错的方式：别动背景图，只给容器内部留白。适用于背景图固定高度/不需要自适应内容的场景。
-
padding值必须大于背景图中关键内容（如 logo、渐变起始点）到容器边缘的距离 - 如果背景图是
background-position: center top，顶部留空优先加padding-top - 避免只用
margin—— 它作用于外部，不影响容器内背景图与文字的相对位置
body {
background-image: url('bg.jpg');
background-position: center top;
background-repeat: no-repeat;
padding-top: 80px; /* 让文字从第80像素开始显示 */
}用 background-attachment: fixed 配合 min-height 防止滚动错位
当页面内容多、需要滚动时，background-attachment: scroll（默认）会让背景图随页面滚动，容易造成视觉错乱；而 fixed 虽然能“钉住”背景，但若容器没设最小高度，文字可能直接贴到视口顶部——尤其在小屏或内容少时。
- 必须配合
min-height: 100vh，确保容器至少撑满一屏 -
background-size: cover常和fixed搭配，否则拉伸失真 - 移动端慎用
fixed，iOS Safari 旧版本有渲染 bug，可改用scroll+background-size: contain
section.hero {
background-image: url('hero-bg.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
min-height: 100vh;
padding: 120px 20px 60px; /* 上下左右都留白，防裁切 */
}用伪元素 ::before 单独承载背景图
这是最灵活、最可控的方式，把背景图从容器样式里剥离，变成一个独立的、可精确定位的层。适合需要文字居中、背景模糊、叠加蒙版等复杂效果的场景。
立即学习“前端免费学习笔记（深入）”；
- 伪元素需设
content: ""，否则不渲染 - 必须用
position: absolute并配合z-index控制层级：伪元素z-index: -1，文字保持默认层 - 父容器要设
position: relative，否则absolute会相对于 body 定位 - 记得加
background-size: cover和background-position，不然图可能只显示左上角一小块
.hero {
position: relative;
min-height: 100vh;
color: white;
}
.hero::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('overlay-bg.jpg');
background-size: cover;
background-position: center;
z-index: -1;
}背景图和文字不重叠的关键，从来不是“调间距”，而是明确谁负责展示、谁负责内容、谁来决定尺寸和定位。伪元素方案看似多写几行，但后续加毛玻璃、渐变遮罩、响应式缩放时，几乎不用动 HTML 结构。
