div hover时background-image过渡效果失效问题求助

嘿，这问题我之前也踩过坑！核心原因是：主流浏览器（包括Chrome和Firefox）目前不支持直接对background-image中的线性渐变属性做过渡动画。因为线性渐变属于浏览器动态生成的图像资源，浏览器没法在两个不同的渐变值之间进行平滑的插值计算，所以你的transition: background-image规则根本不会触发效果。

给你两个实用的解决方案，都能实现你要的hover渐变过渡效果：

方案1：使用伪元素叠加实现过渡 #

思路是在#header上叠加一个伪元素，默认设置完全透明，hover时改变伪元素的opacity，利用opacity的过渡来模拟渐变的深浅变化：

<html>
<body>
  <div id="header"> this is my header</div>
</body>
</html>

#header {
  border: 0.1px solid #666;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  height: 10vh;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* 叠加伪元素承载hover后的渐变 */
#header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0));
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}

#header:hover::before {
  opacity: 1;
}

方案2：利用background-position结合多重渐变 #

思路是把初始渐变和hover渐变都写在background-image里，通过hover时改变background-position来切换显示的渐变，这种方法也能触发平滑过渡：

#header {
  border: 0.1px solid #666;
  /* 同时设置两个渐变，上下排列 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0)),
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  background-size: 100% 200%;
  background-position: top;
  height: 10vh;
  padding: 0;
  transition: background-position 1s ease-in-out;
}

#header:hover {
  background-position: bottom;
}

这两种方法都能在Chrome和Firefox里正常生效，你可以根据自己的需求选一个～

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