图片容器必须设为相对定位
绝对定位的遮罩层要能准确盖在图片上，父容器不设 position: relative，position: absolute 就会往上找最近的定位祖先，经常飘到页面顶部或被其他布局干扰。常见错误是只给遮罩加 absolute，忘了约束它的“锚点”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 图片外层包裹一个
<div class="img-wrapper">，并立即加上position: relative - 如果用
<figure>或<picture>，同样需要显式设position: relative - 避免用
display: inline的元素当容器——它不产生块级格式化上下文，可能导致定位偏移
遮罩层要用 flex 居中文字，别靠 margin 或 top/left
很多人用 top: 50%; left: 50% 配合 transform: translate(-50%, -50%) 居中，看似可行，但一旦文字换行、字体缩放或容器宽高变化，就容易错位；更麻烦的是，这种写法在响应式断点里极易失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层本身设
display: flex+justify-content: center+align-items: center - 文字容器（比如
<p class="caption">）不需要额外定位，也不用设width或height - 若需多行文字有内边距，直接在文字容器上加
padding，别动遮罩层尺寸
透明度别只调 opacity，优先用 background-color 的 rgba
用 opacity: 0.7 给整个遮罩层降透明度，会导致里面的文字也变淡，可读性下降；而且 opacity 会把子元素一并透出，如果遮罩里有图标或按钮，交互体验会变差。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层背景用
background-color: rgba(0, 0, 0, 0.6)，文字颜色保持纯白color: #fff - 如果需要渐变遮罩，用
background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent)，依然不影响文字 - 避免在遮罩层上叠加多个半透明层——叠加两次
opacity: 0.5实际是 0.25，难以控制
响应式下图片宽高比容易崩，得用 aspect-ratio 或 padding-bottom hack
单纯设 width: 100% 和 height: auto，图片拉伸后遮罩层可能溢出或留白；尤其在移动端，图片被压缩时，文字区域会突然“掉出”可视区。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器直接用
aspect-ratio: 16 / 9在图片或容器上（注意：IE 不支持） - 兼容旧版：用
padding-bottom: 56.25%（对应 16:9）+position: absolute图片，再配合top: 0; left: 0; width: 100%; height: 100% - 文字容器加
max-width: 80%和line-clamp: 2（配合display: -webkit-box），防长标题撑破遮罩
真正难的不是写几行 CSS，而是所有这些规则得同时生效：定位锚点对了，flex 居中稳了，rgba 背景清透了，宽高比锁住了——漏掉任意一环，上线后都会在某个机型或缩放比例下露馅。
