图片容器必须设为相对定位，因img是替换元素不支持伪元素；遮罩层需用绝对定位+四边绑定或宽高100%撑满；文字和过渡效果写在::after中，配合opacity和transition；pointer-events需设为none/inline以保障图片可交互。
图片容器必须设为相对定位
直接给 <img> 元素加 ::after 伪元素是无效的，因为 <img> 是替换元素，不支持伪元素。必须用一个包裹容器（如 <div> 或 <code><figure></figure>），并设置 position: relative，才能让遮罩层通过绝对定位准确覆盖。
- 错误写法：
img::after { ... }—— 浏览器直接忽略 - 正确结构：外层
<div class="image-wrapper"><img src="..."></div>，样式作用于.image-wrapper - 漏掉
position: relative会导致遮罩层脱离图片位置，飘到页面左上角
遮罩层需用绝对定位 + 宽高撑满
::after 默认是行内级，不占空间，也不响应宽高。要让它填满图片区域，得显式设置 position: absolute 并绑定四边（top/left/right/bottom）或继承容器尺寸。
- 推荐写法：
top: 0; left: 0; width: 100%; height: 100%，配合content: ""和display: block - 避免只写
width: 100%; height: 100%而不设position: absolute—— 宽高无效 - 若图片宽高不固定（如响应式），建议容器用
aspect-ratio或padding-top技巧保形，否则遮罩可能拉伸或错位
文字内容和过渡效果必须写在 ::after 里
遮罩层本身是空的，文字靠 content 注入；悬停效果靠 opacity、transform 等属性控制显示/隐藏，不能依赖父容器的 hover 类名切换。
- 文字写法：
.image-wrapper::after { content: "点击查看大图"; } - 悬停触发：
.image-wrapper:hover::after { opacity: 1; }，同时提前设好opacity: 0和transition: opacity 0.3s - 别把
transition写在:hover状态里 —— 动画只会在鼠标移入时生效，移出会突兀消失 - 如果想让文字居中，用
display: flex+justify-content/align-items，但需确保::after是块级（display: flex自带）
z-index 和 pointer-events 要小心处理
遮罩层默认会挡住图片，导致图片无法点击或右键保存。常见做法是让遮罩“透点指针”过去，或仅在悬停时才拦截。
- 让图片可点击：
.image-wrapper::after { pointer-events: none; }，再给文字单独加一层::before或用span实现（更可控） - 如果坚持单伪元素承载文字+遮罩，需设
pointer-events: auto仅在悬停时启用：.image-wrapper:hover::after { pointer-events: auto; } -
z-index必须设（哪怕只是1），否则可能被其他元素盖住；注意父容器不能有overflow: hidden且裁剪了伪元素区域
.image-wrapper {
position: relative;
display: inline-block;
}
.image-wrapper::after {
content: "详情";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.image-wrapper:hover::after {
opacity: 1;
pointer-events: auto;
}
伪元素遮罩看着轻量，但一旦图片尺寸动态变化、容器有 transform 或 filter，::after 的定位就容易偏移。真要兼顾语义、可访问性和交互可靠性，用真实子元素（比如 <div class="overlay">）反而更省心。</div>
