父元素 background-color 被盖住主因是高度塌陷或子元素背景/内容完全遮挡，需检查高度、清除浮动、调整子元素 z-index 或背景设置，而非修改父元素 z-index。
background-color 被子元素盖住怎么办
最常见的情况不是写错了 background-color，而是父容器没“撑开”或被子元素的背景/内容完全遮挡。比如一个空的 div 设了 background-color: red，但页面上啥也看不到——因为它高度为 0。
- 检查父元素是否设置了
height、min-height或有内容（文本、内边距、浮动子元素等）来产生高度 - 用浏览器开发者工具选中该元素，看盒模型（Layout 面板）里
height是否为0 - 如果子元素是浮动（
float: left），父元素未清除浮动，也会导致高度塌陷，此时需加overflow: hidden或伪元素清除
z-index 对 background-color 无效
background-color 是元素自身的绘制属性，不参与层叠上下文（stacking context）的排序；z-index 只控制元素整体（包括边框、内容、背景）在 z 轴上的堆叠顺序，但它不能让“背景单独浮到前面”。如果你发现背景被盖住，问题一定出在别的地方。
- 确认是不是子元素自身带了
background-color或background-image，且铺满整个父容器 - 检查是否误用了
opacity或transform，它们会创建新的层叠上下文，改变子元素相对于父背景的渲染顺序 - 不要给父元素设
z-index试图“抬高背景”，它不会起作用；要调整的是覆盖物（子元素）的z-index或移除其背景
background-color 在 flex / grid 容器里失效的典型场景
当父元素是 display: flex 或 display: grid，而子元素使用了 margin: auto 居中，或设置了 align-self: stretch，就可能把子元素拉伸填满父容器，导致父背景不可见。
- 用开发者工具临时禁用子元素的
margin、align-self或flex-grow，观察父背景是否出现 - 如果子元素是图片或 iframe，注意它们默认是 inline 元素，会在底部留白（基线对齐），造成父容器高度异常；可加
vertical-align: top或设display: block - flex 容器若设了
align-items: stretch（默认值），且子元素无显式高度，也可能撑满——这时父背景仍存在，只是被完全遮盖
透明度和混合模式干扰背景显示
看似“背景没了”，其实是被 opacity、background-blend-mode 或 mix-blend-mode 改变了视觉效果。尤其当父元素设了 opacity: 0.9，子元素又带白色背景时，父背景会被弱化甚至“消失”。
-
opacity作用于整个元素（含背景），不是仅影响内容；如需只让文字半透，请改用color: rgba(0,0,0,0.7) - 检查是否意外启用了
background-blend-mode: multiply等混合模式，它会让多个背景层相互作用，可能使纯色背景变暗或不可见 - 避免在父元素上用
mix-blend-mode，它会让父背景与背后元素混合，而不是与子元素混合——这常导致预期外的“背景消失”假象
.card {
background-color: #4a6fa5;
padding: 1rem;
}
.card > * {
background-color: white; /* 这才是盖住父背景的元凶 */
margin: 0 -1rem; /* 水平撑满，彻底遮挡 */
}
真正容易被忽略的是：背景颜色永远在元素“内部”绘制，它不会溢出，也不能脱离元素独立存在；所有“看不见”的情况，本质都是它被更靠前的像素覆盖了，而不是它没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
