本文详解如何通过 CSS opacity 和 transition 属性，为伪元素或实际元素创建流畅、双向（进入与离开均缓动）的悬停渐变遮罩过渡效果，解决直接修改 background 导致过渡失效的问题。
本文详解如何通过 css `opacity` 和 `transition` 属性，为伪元素或实际元素创建流畅、双向（进入与离开均缓动）的悬停渐变遮罩过渡效果，解决直接修改 `background` 导致过渡失效的问题。
在实现带背景图容器上的半透明渐变遮罩（如深色蒙版）时，一个常见误区是试图对 background 属性本身做 transition——但 CSS 规范中 background（尤其是 background-image 或 linear-gradient）不支持过渡动画，因此 .bg-gradient:hover { background: transparent; } 不会触发平滑变化，而是瞬间切换。
✅ 正确解法：使用 opacity 控制可见性，配合统一且声明在常态下的 transition：
.bg-gradient {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* 使用实际元素承载渐变，而非 :before */
background: linear-gradient(transparent, rgba(0 0 0 / 0.8) 50%);
opacity: 1;
/* 关键：transition 必须写在常态（非 hover）规则中，且涵盖所有需过渡的属性 */
transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
}
.bg-gradient:hover {
opacity: 0; /* 仅改变 opacity，浏览器可硬件加速，过渡自然 */
}
⚠️ 注意事项：
- ❌ 不要在
:hover中重新定义transition-duration或transition，这会导致「进入有动画、离开无动画」的不对称行为； - ✅
transition必须写在基础状态（.bg-gradient），确保正向与反向过渡均生效； - ✅ 若坚持用伪元素（如
:before），需确保其被正确继承定位上下文，且transition同样声明在伪元素的基础态中； - ? 性能建议：优先使用
opacity+transform类属性过渡（GPU 加速），避免触发布局重排（layout）或重绘（paint）。
完整结构示例（精简关键部分）：
<div class="asc" style="background-image: url('...');">
<div class="bg-gradient"></div>
<h2 class="text-center text-white">AVAILABLE</h2>
</div>
? 进阶提示：如需更丰富的交互动效（如渐变方向变化、颜色叠加），可结合
background-position动画或 CSS 自定义属性（--mask-opacity）+@property（现代浏览器）实现可控渐变过渡，但opacity方案兼容性最佳（IE10+），推荐作为首选实践。
