推荐用::before，因其默认在内容底层渲染，更符合遮罩盖在图上的直觉；::after易被子元素遮挡。父容器须设position: relative，伪元素需content: ""、absolute定位及rgba背景，opacity配合transition实现淡入淡出。
直接用 hover 配合 ::before 或 ::after 伪元素就能实现干净的遮罩效果，不需要 JS，也不必额外加 DOM 节点。
遮罩层用 ::before 还是 ::after？
两者都行，但推荐用 ::before：它默认在内容底层渲染，更符合“遮罩盖在图上”的直觉；::after 容易被文字或子元素意外挡住，尤其当容器里有 position: relative 的子项时。
关键点：
- 父容器必须设
position: relative，否则伪元素的absolute定位会相对于 body - 伪元素要设
content: ""，否则不渲染 - 遮罩背景建议用
rgba()，方便控制透明度而不影响子元素继承
opacity 和 visibility 哪个更适合控制显隐？
用 opacity 更稳妥。虽然 visibility: hidden 能彻底移除交互，但过渡动画不支持 visibility 的渐变（浏览器只做硬切），而 opacity 可以配合 transition 实现淡入淡出。
立即学习“前端免费学习笔记（深入）”；
注意：
- 别只写
transition: opacity 0.3s，要加上transition-property显式声明，避免意外触发其他属性动画 - 如果遮罩上有文字，记得给文字设
color: white或z-index: 1，不然可能被遮罩本身盖住 - 移动端 Safari 对
hover支持弱，点击后才触发，真要兼容得加@media (hover: hover)做隔离
常见错例：遮罩一闪而过 / 悬停失效
八成是因为这几个细节没处理好：
- 父容器没设
overflow: hidden，遮罩超出图片区域时鼠标移出边界，hover立刻中断 - 伪元素没设
top: 0; left: 0; width: 100%; height: 100%，导致尺寸不对齐 - 图片用了
display: block但没清除下方默认间隙，造成容器高度多出几像素，悬停区域错位 - 用了
transform: scale()动画却忘了加will-change: transform，低端机卡顿明显
最简可用代码就三段：.card { position: relative; overflow: hidden; }，.card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.25s; }，.card:hover::before { opacity: 1; }。复杂交互不是靠堆属性，而是先稳住定位和层级关系。
