CSS伪元素实现图片遮罩层_无需额外HTML标签的悬停特效

伪元素遮罩需父容器设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 触发时机、响应式下的尺寸继承……少一个条件，效果就断在那儿，而且不容易一眼看出哪错了。