应使用 background-color 配合 rgba() 和 transition 实现柔和明暗变化，而非 opacity；默认设 rgba(0,0,0,0.6)，hover 时改为 rgba(0,0,0,0.2)，并添加 transition: background-color 0.3s ease。
直接用 transition: opacity 无法改变亮度，因为 opacity 控制的是整体透明度，不是明暗。要实现 hover 时“柔和变亮/变暗”的遮罩效果，得用更精准的方案。
用 background-color + rgba 配合 transition
遮罩本质是一层半透色块（比如黑色遮罩让图片变暗），亮度变化其实是调整遮罩的透明度或颜色强度。推荐用 rgba() 定义背景色，并对 background-color 做过渡：
- 默认遮罩：
background-color: rgba(0, 0, 0, 0.6)（较暗） - hover 时：
background-color: rgba(0, 0, 0, 0.2)（更浅，显得亮） - 加上：
transition: background-color 0.3s ease;
这样颜色透明度渐变，视觉上就是“缓缓透出原图”，过渡自然不突兀。
用 backdrop-filter 模拟局部提亮（进阶）
如果想让 hover 区域“反向变亮”（比如遮罩变模糊+变浅），可结合 backdrop-filter 和 opacity：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层设
backdrop-filter: blur(2px)+background-color: rgba(255,255,255,0.1) - hover 时降低 alpha 值或加轻微 scale，再配
transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)
这种组合比纯 opacity 更有质感，适合现代 UI 风格。
避免踩坑的关键细节
很多“过渡生硬”其实不是写法问题，而是触发条件太敏感或硬件加速没开：
- 确保遮罩层是独立渲染层：加
transform: translateZ(0)或will-change: background-color - 别在 hover 中同时改多个高成本属性（如 width/height/top/left），专注 color、opacity、transform
- 时间别太短（0.5s），0.25–0.35s 最符合人眼感知节奏
基本上就这些。核心是：别依赖 opacity 控制亮度，用 rgba 调背景色 + 合理缓动函数，效果立马稳且柔。
