伪元素遮罩需父容器设position: relative以建立定位上下文，::before/::after必须含content: ""且用absolute+inset: 0贴合，transition写在常态规则中，z-index合理控制层级。
用 ::before 或 ::after 叠加遮罩，前提是父容器得是定位上下文
直接套伪元素却没效果？八成是忘了给图片容器加 position: relative。伪元素默认脱离文档流，但它的定位基准是最近的「已定位祖先」——没设 position 的父元素，它就往上一直找，可能跑到 body 上去了，完全盖不住图。
- 图片外层必须有包裹容器（不能直接在
<img alt="CSS伪元素实现图片遮罩层_无需额外HTML标签的悬停特效" >上用伪元素，<img alt="CSS伪元素实现图片遮罩层_无需额外HTML标签的悬停特效" >不支持::before/::after） - 容器设
position: relative，伪元素设position: absolute+top/left/right/bottom: 0才能严丝合缝贴图 - 记得加
z-index控制层级，遮罩通常需要比图片高，比如z-index: 1，而图片本身别设z-index（否则可能形成新层叠上下文，反把遮罩压下面）
悬停时渐变遮罩，transition 得写在常态规则里，不是 hover 里
写成 .cover:hover { opacity: 0.7; transition: opacity 0.3s } 是无效的——hover 状态才加 transition，浏览器没机会做过渡动画。transition 必须定义在初始状态，让浏览器提前知道“这个属性要过渡”。
- 正确写法：
.cover::before { opacity: 0; transition: opacity 0.3s ease; }，再写.cover:hover::before { opacity: 0.6; } - 避免对
display做 transition（不支持），改用opacity+visibility组合控制显隐 - 如果遮罩带背景色，
background-color也能过渡，但别和opacity同时动，容易颜色发灰或闪烁
伪元素遮罩在 Safari 和旧版 Edge 上透明度异常？检查是否漏了 content
::before 和 ::after 必须有 content 才会渲染，哪怕只是空字符串。Safari 尤其严格：没 content: ""，遮罩直接不出现；有些旧版 Edge 则会显示为 1px 高的细线——看着像没生效，其实是高度塌陷了。
- 强制写
content: ""，别省略 - 加上
display: block（或flex），避免某些场景下被当行内元素挤压 - 若遮罩内容需文字或图标，用
content: "✓"或content: url(ico.svg)，但注意 base64 图片在部分安卓 WebView 中可能不加载
响应式图片下遮罩错位？宽高比变化时，absolute 容易失守
图片用 max-width: 100% + height: auto，容器宽高不固定，伪元素虽然占满父容器，但图片本身可能还没加载完，或者自然宽高比和容器不一致，导致遮罩边缘露白或溢出。
立即学习“前端免费学习笔记（深入）”；
- 容器用
aspect-ratio（现代浏览器）或padding-top百分比技巧锁定宽高比 - 伪元素优先用
inset: 0替代top/left/right/bottom: 0，更简洁且兼容性稍好 - 真要兼容老浏览器，考虑用
background-image把遮罩合成到容器背景里，而不是伪元素——虽然牺牲一点灵活性，但稳
伪元素遮罩看着轻量，但每个细节都卡在渲染机制上：定位上下文、content 强制、transition 触发时机、响应式下的尺寸继承……少一个条件，效果就断在那儿，而且不容易一眼看出哪错了。
