图片蒙版需用相对定位容器包裹img，::before设absolute+top/left/right/bottom:0并声明content:""；过渡用opacity或rgba()；IE11不支持伪元素蒙版，须降级为真实元素。
图片容器必须设置相对定位
直接给 img 元素加 ::before 是无效的，因为 img 是替换元素，伪元素无法渲染在其上。必须用一个块级容器（如 <div> 或 <figure>）包裹图片，并设 position: relative，才能让 ::before 作为其层叠子元素存在。
- 错误写法：
img::before { ... }—— 浏览器忽略，无任何效果 - 正确结构：外层
<div class="img-wrap"><img src="..."></div>，样式作用于.img-wrap::before - 若容器本身有 padding/margin，需注意蒙版尺寸是否要包含这些空间
::before 必须设为绝对定位并覆盖全图
蒙版要填满图片区域，::before 必须设 position: absolute，并用 top/left/right/bottom: 0 拉伸占满父容器。只设 width: 100%; height: 100% 不可靠——当图片等比缩放或容器宽高比不固定时，容易错位或留白。
- 关键样式：
.img-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } - 务必声明
content: ""，否则伪元素不生成 - 若图片是响应式（如
max-width: 100%; height: auto），容器高度由内容撑开，此时bottom: 0才能确保蒙版贴底
悬浮时控制 opacity 或 background 实现渐变蒙版
纯黑/白蒙版太生硬，常见做法是用半透明色叠加，再配合 transition 实现淡入。注意不要对 background 做过渡（浏览器不支持颜色插值），而应过渡 opacity 或使用 rgba() 配合 background 固定值。
- 推荐写法：
.img-wrap::before { background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; }，然后.img-wrap:hover::before { opacity: 1; } - 避免写
transition: background 0.3s——rgba(0,0,0,0)到rgba(0,0,0,0.6)在部分旧浏览器中会跳变或失效 - 如果需要文字浮层，把文字元素也放在容器内、设
position: absolute并z-index: 1，确保在蒙版上方
IE11 及更老浏览器不支持 img 上的 ::before，但可降级处理
IE11 完全不渲染 img::before，哪怕你套了容器也没用。这不是 bug，是规范限制——IE 对替换元素伪元素的支持极其有限。所以实际项目中，要么放弃 IE 支持，要么改用真实元素（如额外 <span>）模拟蒙版。
立即学习“前端免费学习笔记（深入）”；
- 兼容方案示例：
<div class="img-wrap"><img><span class="overlay"></span></div>，CSS 中同时控制.overlay和.img-wrap::before，用@supports或 JS 检测隔离 -
@supports (position: sticky) { .img-wrap::before { ... } }不适用——这个特性与伪元素无关，不能用来判断 ::before 支持度 - 真正可靠的检测方式只有 UA 判断或
document.createElement("div").style.cssText尝试写入伪元素相关属性（实际极少这么做）
蒙版逻辑看着简单，但容器定位、伪元素生效条件、过渡行为、兼容性边界这四点，漏掉任一环节都会导致“hover 没反应”或“蒙版飘在别处”。尤其是开发中途换图或改布局时，最容易忽略容器高度是否仍被图片撑开。
