父容器必须设 position: relative，遮罩层用 background-color: rgba(0,0,0,0.6) 而非 opacity，定位推荐 top/left + transform 居中或 bottom + text-align，z-index 至少 10 并确保父容器形成层叠上下文。
图片父容器必须设为相对定位
绝对定位的子元素（比如遮罩文字层）会相对于最近的已定位祖先元素偏移，如果父容器没设 position: relative，它就可能往上找 body 或其他祖先，导致遮罩错位。这不是“可选”，是必须加的样式。
- 父容器加
position: relative，哪怕它本身不需要偏移 - 不要依赖默认的
static定位去“自然流”布局遮罩层 - 若父容器本身已是
absolute或fixed，那也行，但多数情况就是补个relative
遮罩层要用 rgba 而不是 opacity
opacity 会让整个元素（包括文字）都变透明，而 rgba(0,0,0,0.6) 这类背景色只影响背景，文字颜色、粗细、阴影等保持清晰可读——这才是“遮罩”的本意：压暗底图，不削弱文字表现力。
- 用
background-color: rgba(0, 0, 0, 0.6)，别用opacity: 0.6 - 如果遮罩层里还有图标或伪元素，
opacity会让它们一并发虚，rgba不会 - IE9+ 支持
rgba，老项目需兼容 IE8 的话得另配半透 png 背景图
文字层定位常用 top/left + padding 组合
纯靠 top: 0; left: 0; width: 100%; height: 100% 容易让文字贴边、拥挤。实际中更稳妥的是用偏移 + 内边距控制留白，同时配合 display: flex 居中。
- 设
top: 50%; left: 50%; transform: translate(-50%, -50%)实现居中（比margin更可靠） - 若只需底部居中，用
bottom: 1rem; left: 1rem; right: 1rem配合text-align: center - 文字内容多时，加
padding: 1.2rem避免紧贴边缘，尤其移动端
z-index 值要明确且足够高
遮罩层必须盖在图片上、但又不能意外盖住页面其他组件（比如导航栏）。常见错误是设 z-index: 1，结果被隔壁模块的 z-index: 2 盖掉，或者干脆没生效——因为父容器没形成层叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有
position: relative（已提过），否则子元素的z-index无效 - 遮罩层设
z-index: 10起步，避免和通用组件冲突（如.header常用z-index: 100） - 如果图片是
<img alt="CSS如何实现图片文字遮罩效果_在图片父容器内绝对定位一层带rgba背景的文字区" >标签，它默认是 inline 元素，不会创建层叠上下文；遮罩层z-index只跟父容器层级有关，跟图片本身无关
真正容易被忽略的是：遮罩层的 pointer-events 默认为 auto，如果它挡住了图片的点击区域（比如图片带链接），就得加 pointer-events: none；但如果遮罩层自己要响应点击（比如跳转），那就得保留，并确保它没被父容器的 overflow: hidden 切掉交互热区。
