HTML/CSS中.bg-gradient hover过渡效果失效问题排查

你的过渡效果瞬间完成的核心原因是：渐变效果由.bg-gradient:before伪元素实现，但你在hover状态下修改的是.bg-gradient本身的background属性，两者完全不相关，自然无法触发过渡动画。

修正后的CSS代码 #

.asc {
  height: 500px;
  background-position: 50%;
  background-size: cover;
  position: relative;
}

.bg-gradient {
  position: relative; /* 让伪元素以该容器为定位基准 */
}

.bg-gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0 0 0 / 0.8) 50%);
  transition: all 0.3s ease-in-out; /* 过渡绑定到伪元素的属性变化 */
  -webkit-transition: all 0.3s ease-in-out;
}

/* hover时修改伪元素属性触发过渡 */
.bg-gradient:hover:before {
  opacity: 0; /* 渐变平滑消失，也可改为调整渐变透明度实现其他效果 */
}

.text-center {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
}

关键改动说明 #

1. 给.bg-gradient添加position: relative：确保伪元素的绝对定位基于该容器，避免定位混乱
2. 过渡效果保留在伪元素上：因为渐变是伪元素生成的，只有修改它的属性（如opacity、background）才能触发过渡
3. hover状态修改伪元素的opacity：替代原代码中修改.bg-gradient的无效操作，实现平滑的显示/隐藏过渡；如果需要hover时渐变加深，可改为background: linear-gradient(transparent, rgba(0 0 0 / 1) 50%)，同样会触发过渡

内容的提问来源于stack exchange，提问作者MR Lappy