悬停时 div 的背景图像过渡不起作用

Question

我有一个 div 想要在悬停时产生过渡效果。

我整理了以下 CSS 代码，但是转换在 chrome 和 firefox 中都不起作用。

#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;
    transition: background-image 1s ease-in-out; /* NOT WORKING */
    -webkit-transition: background-image 1s ease-in-out; /* NOT WORKING */
  }
  
  #header:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0));

   }

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

我做错了什么吗？

如果有人能帮忙就太好了！！

非常感谢

Answer 1

CSS渐变不支持transition属性。

对于您的情况，您可以通过使用 pseudoelement 并在悬停时转换其不透明度来创建类似的效果。

#header {
  border: 0.1px solid #666;
  height: 10vh;
  padding: 0;
  position: relative;
}

#header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  transition: opacity 1s ease-in-out;
  background: linear-gradient(black, transparent);
}

#header:hover:before {
  opacity: .75;
}

.logo {
  color: white;
  position: relative;
}

<div id="header"><div class="logo">LOGO</div></div>

悬停时 div 的背景图像过渡不起作用

background-image transition for div on hover is not working

html

css

background-image

css-transitions