position: absolute + rgba() 是最稳、兼容性最好、易调试的遮罩方案；父容器须设 position: relative 防错位，禁用 opacity 以免文字发虚，推荐 inset: 0 替代宽高设置。
直接用 position: absolute + rgba() 背景是最稳、兼容性最好、也最容易调试的方案；mask-image 看起来高级，但 Safari 和 Firefox 对渐变支持差，SVG 写法又容易因 URL 或编码出错而静默失效。
遮罩层定位错位：父容器没设 position: relative
遮罩层用 position: absolute 后跑偏，大概率是因为外层 <div> 没加 position: relative。浏览器会一直往上找已定位祖先，可能落到 <body> 上，导致遮罩飘在页面左上角。
- 必须给图片容器（比如
<div class="img-wrapper">）加position: relative，哪怕它没其他样式也要加 - 别把
position: relative加在<img>标签上——<img>默认不是定位上下文，子元素不会以它为参考 - 如果容器用了
padding，遮罩层别再写width: 100%; height: 100%，改用inset: 0更可靠
遮罩文字发虚或 hover 卡顿：误用 opacity 而非 rgba()
写了 opacity: 0.6 后，里面文字也变透明、边缘模糊，hover 动画还卡——这是因为 opacity 是作用于整个元素及其所有子节点的渲染层，而你真正只需要背景“透一点”。
- 遮罩层背景用
background-color: rgba(0, 0, 0, 0.6)，文字保持 100% 清晰度 -
rgba()不触发全量重绘，动画更顺；opacity在某些低端设备上确实有性能抖动 - IE8 不支持
rgba()，但 2026 年基本可忽略；真要兼容，可用filter: alpha(opacity=60)降级（仅 IE）
响应式下遮罩变形或裁剪异常：图片没处理 inline 元素默认留白 + object-fit
图片在小屏上被拉伸、遮罩只盖住左半边，常见原因是：<img> 是 inline 元素，底部有空白；且没控制缩放行为，导致容器尺寸变时图片比例失控。
立即学习“前端免费学习笔记（深入）”；
-
<img>加display: block消除底部留白 - 图片设
width: 100%; height: 100%; object-fit: cover，确保等比填满且不畸变 - 遮罩层保持
inset: 0，自动跟随容器尺寸变化，不用手动算宽高 - 避免用
background-image替代<img>——语义弱、无法懒加载、SEO 不友好
mask-image 静默失效：渐变写法跨浏览器不一致 + SVG 编码漏转义
写了 mask-image: linear-gradient(...) 却没效果？不是代码错了，是浏览器根本不认：Safari 把 transparent 当成黑，Firefox 直接跳过整条声明，Chrome 还得加 -webkit-mask-image 前缀。
- 精细剪裁（如文字镂空、不规则轮廓）必须用 SVG 或 PNG 遮罩图，别碰渐变
- SVG 推荐内联进
<defs>，用url(#my-mask)引用，避开 CORS 和路径问题 - data URL 方式必须全量 URL 编码：
<→%3C，"→%22，不能换行、不能有空格 - 用
mask-size: contain; mask-position: center; mask-repeat: no-repeat三件套，否则 SVG 遮罩会平铺或偏移
最常被忽略的一点：遮罩层要不要响应点击事件？如果里面放了删除图标或按钮，记得给遮罩层加 pointer-events: none，否则会挡住底层 <img> 的 click 事件。
