Question

我有一个div，我希望在悬停时产生过渡效果。

我将以下CSS代码放在一起，但转换不适用于chrome或firefox。

IMFMediaSession

#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));

   }

我做错了吗？

如果有人能提供帮助会很棒!!

非常感谢

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>

Answer 2

您无法像这样在. .. .buildpath .git .gitignore .htaccess .project .settings上应用转场。您需要在另一个属性上应用转换。例如，您可以在背景上使用多个渐变，并在background-image上应用转换：

background-size

#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% 0% , auto;
  background-repeat:no-repeat;
  height: 10vh;
  padding: 0;
  transition: background 1s ease-in-out;
  -webkit-transition: background 1s ease-in-out;

}

#header:hover {
  background-size: 100% 100%, auto;
}

悬停时div的背景图像转换不起作用

2 个答案: