background-image 被 position: absolute 覆盖或失效的主因有三：一是父容器未设 position: relative 导致高度坍缩；二是 absolute 元素缺少显式宽高；三是 background 简写重置了 background-image。
background-image 被 position: absolute 覆盖或失效
元素设了 position: absolute 本身不会让背景图消失，但常因配套样式出问题。最典型的是：父容器没设 position: relative，导致绝对定位元素脱离文档流后高度坍缩为 0 —— 背景图自然不可见。
检查以下几点：
- 给父容器加
position: relative（否则absolute元素的定位基准不明确，且可能被压缩） - 确认该元素有显式尺寸：
width和height，或至少min-height；absolute元素默认不撑开父容器，也不继承父高 - 避免只写
top/left却漏掉width和height，否则浏览器计算出的尺寸可能是 0×0 - 若用
inset（如inset: 0）填充父容器，需确保父容器本身有尺寸，否则子元素仍无渲染区域
background-attachment: fixed 在定位元素中失效
background-attachment: fixed 在 position: absolute 或 position: fixed 元素上多数浏览器会忽略——这是 CSS 规范行为，不是 bug。你写了也不会生效。
替代方案：
- 改用
background-attachment: scroll（默认值），配合background-size: cover和background-position: center实现视觉“固定”效果 - 如果真需要视差滚动，得用 JS 控制
background-position动态偏移，或换用transform: translateZ(0)触发硬件加速（但注意旧版 Safari 可能因此禁用背景图） - 不要在
absolute元素里同时写fixed和top/left，后者优先级更高，前者实际被丢弃
z-index 遮挡导致背景图“看不见”
背景图本身没有层级，它永远在元素内容之下、边框之下。但如果该元素上面叠了另一个 position: relative 或 absolute 元素（比如遮罩层、按钮、伪元素），且没设 background-color: transparent 或透明度，就会把背景图盖住。
快速验证方式：
- 临时给该元素加
outline: 2px solid red，看红色框是否出现 —— 出现说明元素存在且定位正常，问题在遮挡或背景属性 - 在开发者工具里禁用上方兄弟/子元素的
z-index或background，观察背景图是否浮现 - 检查是否有
::before/::after伪元素占满整个区域且没设透明背景 -
z-index只对定位元素生效，非定位元素即使设了也无效，别浪费时间调它
background 简写覆盖 background-image
这是最隐蔽的坑：你先写了 background-image: url("bg.jpg")，后面又加了一行 background: #fff —— 这条简写会重置 background-image 为 none，连带清掉 background-repeat、background-position 等所有子属性。
排查方法：
- 在开发者工具的 Styles 面板里，看
background-image是否被划掉（strikethrough）；如果被划掉，说明被更高优先级规则覆盖 - 搜索整个 CSS 文件，找有没有
background:开头的声明，尤其注意媒体查询或组件库注入的样式 - 统一用子属性写法：
background-color、background-image、background-size分开写，避免简写干扰 - 如果必须用简写，确保一次性写全：
background: url("bg.jpg") no-repeat center/cover #000
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
