背景图遮挡内容的关键是合理控制其显示方式：用background-size（cover/contain/具体值）缩放、background-position锚定焦点、padding或伪元素隔离内容、background-attachment设为scroll确保滚动同步，并通过z-index保障内容层级。
背景图挡住内容，通常是因为它覆盖了文字或控件的显示区域。关键不是“去掉背景图”，而是让背景图退居幕后、不抢内容风头——用 background-size 控制缩放，用 background-position 调整落点，再配合 background-attachment 和容器尺寸约束，就能稳住内容可见性。
用 background-size 避免拉伸遮挡
默认 background-size: auto 可能导致图片过大撑出容器，或过小重复铺满干扰阅读。优先按需选择：
- cover：等比缩放填满容器，可能裁剪边缘——适合全屏 Banner，但要确保重要内容不在被裁区
- contain：等比缩放完整显示整张图，留白可接受——适合图标型背景或强调图像完整性时
- 具体值（如 100% 80%）：横向铺满、纵向限制高度，常用于顶部渐变+图层叠加场景
靠 background-position 精准锚定视觉焦点
即使图很大，只要把关键区域（比如人脸、LOGO、留白区）对准内容区，就能自然避开文字。常用组合：
-
background-position: center top—— 图片顶部居中，内容从下方开始，安全留空 -
background-position: right bottom—— 把图“推”到右下角，左上区域留给文字/按钮 -
background-position: 20px 30px—— 像素级微调，适合固定尺寸容器内的图标背景
加一层 padding 或伪元素隔离内容
光调背景还不够？直接给内容腾地方：
立即学习“前端免费学习笔记（深入）”；
- 在容器上设
padding（如padding: 60px 20px 20px），把文字“推离”背景密集区 - 用
::before伪元素盖一层半透蒙版：background: rgba(0,0,0,0.2)，既压暗背景提升文字对比度，又不遮挡交互元素 - 内容区单独设
position: relative+z-index: 2，确保层级高于背景
检查 background-attachment 和容器高度
滚动时背景“粘”在视口上（fixed）容易和内容错位，尤其在移动端：
- 默认用
scroll，背景随内容滚动，最稳妥 - 若必须用
fixed，请确保容器有明确height或min-height，避免高度塌陷导致内容被截 - 慎用
background-clip: content-box，它会让背景只画在内边距以内，有时反而暴露底色
基本上就这些——背景图不是装饰品，是布局的一部分。调好 size、定好 position、留出空间、管住层级，内容自然就浮出来了。
