图片容器必须设为position: relative，否则absolute遮罩层会脱离预期位置；遮罩层应使用rgba()设置背景透明度以避免文字发虚；尺寸需设为top:0;left:0;width:100%;height:100%或inset:0确保铺满；图片用display:block和object-fit:cover优化显示。
图片容器必须设为相对定位，否则遮罩层会脱离预期位置
遮罩层要用 position: absolute 覆盖在图片上，但它的定位参考点是最近的「已定位祖先元素」。如果父容器没设 position: relative，遮罩层就会往上找，可能贴到 body 或某个意外的父级上，导致偏移或错位。
实操建议：
- 给图片外层的
<div>加position: relative，哪怕它没其他样式也要加 - 避免用
position: static（默认值）的父容器直接包absolute子元素 - 如果图片是
<img>标签，别把它本身设为relative——absolute遮罩层不会以它为参考，因为<img>默认不是定位上下文
遮罩层背景透明度不能只靠 opacity，得用 rgba() 或 hsla()
opacity 会让整个遮罩元素及其所有子内容（比如文字、图标）一起变透明，而多数场景下你只想让背景“透一点”，文字仍需清晰可读。用 background-color: rgba(0, 0, 0, 0.6) 才真正只影响背景色的不透明度。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层里的标题文字也发虚、看不清
- 加了
opacity: 0.5后 hover 动画变卡顿（opacity触发重绘，rgba更轻量） - IE8 及更早版本不支持
rgba，但这类浏览器现在基本不用考虑；若真要兼容，可用filter: alpha(opacity=60)作降级（仅限 IE）
遮罩层尺寸必须撑满图片区域，且避免触发隐藏溢出
遮罩层默认宽高是 auto，如果不显式设置，它很可能只包裹内部文字内容，而不是铺满整张图。同时，父容器若设了 overflow: hidden，又没控制好遮罩层尺寸，会导致边缘被截断。
实操建议：
- 遮罩层设
top: 0; left: 0; width: 100%; height: 100%，确保填满容器 - 图片本身用
display: block消除底部默认留白（<img>是 inline 元素） - 避免给父容器设
padding后还让遮罩层100%——此时应改用inset: 0（等价于top/left/bottom/right: 0），更可靠
响应式图片 + 遮罩层时，优先用 object-fit 而非 width/height 硬缩放
当图片容器尺寸变化（比如移动端宽度变小），如果只靠 width: 100% 缩放 <img>，图片可能被拉伸或裁剪不均，遮罩层虽然尺寸跟着变，但视觉重心就偏了。
推荐做法：
- 图片设
width: 100%; height: 100%; object-fit: cover，保持比例并填满 - 遮罩层保持
inset: 0，自动跟随 - 慎用
background-image方式实现图片+遮罩（虽简洁），因为图片无法被屏幕阅读器识别，也不支持右键保存
pointer-events: none（需要穿透点击）或 pointer-events: auto（需要拦截点击），交互行为就会和预期不一致。这点得结合具体需求当场判断，没法一概而论。 
