用 ::before 或 ::after 伪元素叠加 rgba() 背景实现遮罩是最轻量、兼容性好、语义干净的方案；直接对 <img> 设 opacity 会使子内容一同变淡，违背“仅压暗图片、不干扰交互”的设计意图。
直接用 CSS 的 ::before 或 ::after 伪元素叠加一层 rgba() 背景，再配合 position: relative 容器控制定位，是最轻量、兼容性好、语义干净的方案。别给 <img> 本身设 opacity，否则文字、图标也会一起变淡。
为什么不能直接对 <img> 用 opacity
常见错误是写 .my-img:hover { opacity: 0.4; }——这会让整个图片（包括它上面的文字、按钮等子内容）都变透明。遮罩本意是「只压暗图片，不干扰交互层」。更糟的是，如果图片被包裹在 <a> 里且没设 display: block，hover 可能根本触发不了。
-
opacity作用于整个元素及其所有后代，无法局部控制 - 若需在遮罩上放文字或按钮，必须把它们和图片放在同一层级，靠定位分离
- 老浏览器（如 IE8）需额外加
filter: alpha(opacity=40)，但值域是 0–100，和opacity的 0–1 不一致，容易配错
用伪元素实现半透明遮罩的标准写法
核心是三层结构：容器（position: relative）→ 图片（默认流式）→ 伪元素（position: absolute 覆盖全图）。伪元素的 background-color 用 rgba() 控制颜色与透明度，pointer-events: none 确保不拦截鼠标事件。
- 容器必须设
overflow: hidden才能让圆角生效（如果同时需要圆角） -
::after比::before更常用，避免意外覆盖其他伪元素 -
content: ''是伪元素生效的必要条件，漏写会导致遮罩不显示 - 不要给伪元素设
z-index，默认就在图片上方；若需压文字，才显式设z-index: 1
.img-wrap {
position: relative;
display: inline-block;
}
.img-wrap img {
display: block;
width: 100%;
}
.img-wrap::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.45);
pointer-events: none;
}
hover 时才显示遮罩的过渡细节
加 transition 不只是为了动效，更是为了防止鼠标快速进出时闪烁或卡顿。关键参数不是时长，而是 timing function 和触发源。
立即学习“前端免费学习笔记（深入）”；
- 过渡必须写在伪元素上：
.img-wrap::after { transition: opacity 0.25s ease-in-out; }，而不是写在:hover规则里 - 初始状态设
opacity: 0，hover 时设opacity: 1，比用background-color渐变更可靠（某些浏览器对 rgba 过渡支持不稳定） - 如果容器是
<a>标签，确保它有明确宽高或display: block，否则::after的top/left/right/bottom可能计算为 0 导致遮罩缩成一个点 - 移动端需注意：
:hover在触摸设备上行为不一致，建议加@media (hover: hover)媒体查询做隔离
需要文字/按钮时的布局陷阱
遮罩层只是背景，真正要交互的内容（比如「查看详情」按钮）得作为真实子元素插入，且必须用 position: absolute 定位到遮罩上方。这时候容易忽略 z-index 层级关系和容器尺寸约束。
- 文字层要设
z-index: 2（遮罩是 1，图片是 0），否则会被遮罩盖住 - 如果容器没设固定宽高，
absolute子元素可能脱离文档流导致容器高度塌陷 - 文字颜色要和遮罩反差足够大，例如遮罩是
rgba(0,0,0,0.6)，文字就别用深灰，改用#fff或加文字阴影 - 慎用
transform: scale()动画文字，部分安卓 WebView 对transform+absolute组合渲染异常
最常被跳过的一步是测试不同图片比例下的表现：遮罩是否始终贴合、圆角是否被裁切、文字是否溢出。用 object-fit: cover 配合固定容器尺寸，比依赖图片原始宽高更可控。
