用grid-area使图片和标题同属一命名区域，容器设rgba背景实现遮罩；标题需position:relative+z-index显式控层；响应式时须重写grid-template-areas。
直接用 grid-area 把图片和标题塞进同一网格区域，再给容器加 background: rgba() 就能实现遮罩效果——但必须控制好层叠顺序和定位上下文，否则标题会被盖住或错位。
grid-area 必须显式配对，不能只设图片不设标题
两个元素要重叠，不是“位置碰巧一样”就行，得让它们语义上属于同一个区域。光给 <img> 设 grid-area: "hero" 没用，<h2></h2> 也得写一模一样的值，否则它会按默认流排到别处去。
-
grid-template-areas在容器上定义，比如"hero hero" "hero hero" - 图片和标题都加
grid-area: "hero"，缺一不可 - 别用
grid-area: 1 / 1 / 2 / 2这种坐标写法替代命名区——它不会触发区域复用逻辑，两个元素仍算不同单元格
rgba 遮罩必须加在容器上，不能加在 <img> 上
把 background: rgba(0, 0, 0, 0.4) 直接写在 <img> 标签上，会导致图片本身变透明，文字也跟着发虚。正确做法是套一层父容器，或者用伪元素。
- 容器设
position: relative（为后续文字定位打基础） - 容器背景用
background: rgba(0, 0, 0, 0.4)，这是最轻量、最可控的写法 - 如果图片用了
object-fit: cover或带圆角，建议改用::before伪元素：必须写content: ""，宽高设100%，否则不渲染
标题被盖住？z-index 不生效是因为没激活定位上下文
Grid 子项默认是 position: static，此时 z-index 完全无效。你看到的“谁在上谁在下”，其实只是 DOM 顺序决定的默认堆叠，不可靠也不可控。
- 给标题加
position: relative+z-index: 2 - 图片保持默认定位，或也加
position: relative+z-index: 1显式控制层级 - 避免在父容器上用
transform、opacity 或 <code>filter——这些会创建新层叠上下文，把z-index锁死在内部
响应式下重叠错乱？grid-template-areas 得重写
小屏时多个元素挤在同一区域又叠加了 transform，很容易堆成一团。命名区域不是一劳永逸的，它必须随断点动态调整。
- 在
@media (max-width: 768px)里重写grid-template-areas，比如把"hero hero"改成"hero" "hero"让标题换行 - 同时检查
grid-template-columns是否还用fr比例——窄屏下可能得改成1fr单列 - 用浏览器 DevTools 的网格可视化功能（勾选 “Show grid areas”）实时验证区域是否对齐
真正容易被忽略的是：grid-area 只管“在哪”，不管“谁在上”。遮罩效果看似简单，但一旦涉及文字定位、多端适配和层叠控制，每一步都得手动确认定位上下文是否激活、z-index 是否落在同一层叠上下文中——漏掉任何一个，都会在某个设备上突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
