纯CSS实现hover遮罩文字需父容器relative定位、遮罩层absolute铺满并用rgba背景+opacity文字分步过渡，transition必须写在默认态，避免opacity整体控制导致文字发虚。
hover 伪类配合 transition 实现遮罩渐变
纯 CSS 图片悬停文字遮罩，核心是用 :hover 触发状态变化，再靠 transition 控制渐变过程。关键不是“加遮罩”，而是让遮罩层（比如一个 div 或 span）的透明度、背景色或 opacity 平滑过渡。
常见错误是直接给图片加 opacity，结果整个图变淡，文字也跟着模糊——遮罩必须是独立图层，叠在图片上方但不影响图片本身渲染。
- 遮罩元素需设
position: absolute，父容器设position: relative - 文字内容建议放在遮罩层内部，避免脱离文档流后定位偏移
-
transition必须写在「默认态」上（即非:hover时），否则首次悬停无动画 - 推荐用
background-color的 rgba 值控制遮罩透明度，比opacity更可控（不会影响子元素）
rgba 背景 + opacity 文字组合更稳妥
只用 opacity 控制遮罩层整体透明度，会导致里面文字也一起淡入淡出，观感生硬；而用 rgba(0, 0, 0, 0.6) 设背景，再单独控制文字的 opacity 或 transform，能实现更细腻的入场效果。
例如：遮罩层默认 background-color: rgba(0, 0, 0, 0)，悬停时变为 rgba(0, 0, 0, 0.7)；文字默认 opacity: 0，悬停时变为 1，两者都配 transition: all 0.3s ease —— 这样遮罩和文字是分步响应的，视觉更有层次。
立即学习“前端免费学习笔记（深入）”；
- 避免对整个遮罩层用
opacity: 0 → 1，否则文字边缘会发虚（半透明叠加导致抗锯齿异常） - 如果文字需要位移入场，优先用
transform: translateY(10px)而非top，性能更好 - 移动端需补
touch-action: manipulation防止点击延迟
IE 兼容性陷阱：filter 和 backdrop-filter 不可用
想用 filter: blur() 或 backdrop-filter 做毛玻璃遮罩？别试了。IE 完全不支持，Edge 17+ 才开始支持 backdrop-filter，且需加 -webkit- 前缀。实际项目中，只要求「渐变遮罩」，就老实用 rgba + transition 组合，兼容到 IE10+ 没压力。
-
filter: opacity()在 IE9+ 可用，但行为和标准opacity不一致，易引发重绘异常 - 不要依赖
::before/::after生成遮罩并同时做transition，IE11 对伪元素transition支持不稳定 - 若必须支持 IE9，把遮罩背景换成半透 png（如 1×1 黑色透明像素），用
background替代background-color
图片尺寸变化时遮罩错位怎么办
当图片是响应式（比如 max-width: 100%）或使用 object-fit: cover 时，遮罩层容易撑满容器却没对齐图片内容区域——因为 absolute 定位是相对于父容器，不是图片本身。
- 解决方案：把图片设为
position: relative，遮罩层用position: absolute; top: 0; left: 0; width: 100%; height: 100% - 或者改用
display: grid布局，图片和遮罩同级，用grid-area重叠，更稳定 - 慎用
background-image方式实现图片 —— 遮罩层无法精确感知图片加载完成后的实际尺寸，容易出现闪动
最易被忽略的是 transition 的 timing-function 选择：ease-in-out 比 linear 更自然，但若遮罩要快速响应（比如卡片网格），cubic-bezier(0.25, 0.46, 0.45, 0.94) 这类轻微弹跳曲线反而更抓眼球。调参时建议在真机上连按几次悬停看顿挫感。
