必须给.grid-container加position: relative，否则::before的absolute会向上找最近定位祖先导致错位；伪元素需设position: absolute、top: 0、left: 0、width: 100%、height: 100%及background-size: cover才能覆盖整个网格区域。
直接给 Grid 容器设 background-image 通常能覆盖整个容器区域，但一旦涉及子项内容、层叠控制或响应式缩放，就会失效——真正要覆盖“整个网格可视区域”，得明确区分「容器背景」和「网格项背景」两种场景。
为什么 z-index: -1 在 Grid 容器里不生效
这不是 Grid 的 bug，而是 CSS 层叠规则在起作用：Grid 容器默认不是定位上下文（position 是 static），z-index 对非定位元素无效；更关键的是，如果图片和文字同属一个网格项，它们天然在同一层叠上下文中，z-index 无法让背景“沉到底下”。
- 必须先给容器加
position: relative，才能让伪元素的absolute定位有参照 - 不要把背景图直接写在内容元素上（比如
.grid-item），否则它和文字共用同一盒模型，缩放、居中都受干扰 - 若子项设置了
overflow: hidden或max-height，会裁剪掉伪元素——因为overflow会创建新的层叠上下文和裁剪边界
用 ::before 伪元素铺满整个 Grid 区域
这是最可控的方式：伪元素脱离文档流，可独立控制尺寸、缩放和层级，且不参与网格轨道计算。
-
.grid-container必须设position: relative -
::before设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
background-size: cover和background-position: center要显式声明，否则默认拉伸失真 - 如果 Grid 有
gap，伪元素会自然覆盖 gap 区域；如需避开 gap，改用background直接写在各网格项上，并配合grid-area分块设置
用 place-items: stretch + 容器背景更轻量
如果只是想让一张图撑满整个 Grid 容器（不含子项内容干扰），且不需要对背景单独做动画或混合效果，这个方案最简：
.grid-container { display: grid; place-items: stretch; background: url('bg.jpg') center/cover no-repeat; }- 兼容性更好，IE11 也支持
- 但子项若有背景色、透明度或
overflow: hidden，会遮挡此背景——此时必须退回伪元素方案 - 别依赖
justify-content: center来“撑开”容器，它只对齐内容，不改变容器自身尺寸；确保body { margin: 0; }且容器设height: 100vh或min-height: 100vh
真正容易被忽略的不是怎么写 CSS，而是子项的 overflow、min-height 和父级 margin ——它们会在开发者工具里“看起来没问题”，却悄悄把背景裁掉或压扁。动手前先检查 Layout 面板里的网格线是否真按预期延伸，比反复调 z-index 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
