悬停时div的背景图像转换不起作用[重复]答案

【问题标题】：background-image transition for div on hover is not working [duplicate]悬停时div的背景图像转换不起作用[重复]
【发布时间】：2018-06-23 00:13:36
【问题描述】：

我有一个 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>

我做错了吗？

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

非常感谢

【问题讨论】：

stackoverflow.com/questions/6542212/…

标签： html css background-image css-transitions

【解决方案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;
}

&lt;div id="header"&gt;&lt;div class="logo"&gt;LOGO&lt;/div&gt;&lt;/div&gt;

【讨论】：

当您在元素上使用不透明度时，您应该从渐变中移除不透明度；）
@sol 这几乎可以工作。唯一的问题是我的标题中有一个徽标文本，并且伪元素似乎覆盖了白色文本，而我只需要背景来进行过渡。我已经尝试将徽标的 div（在标题中）设置为更高的 z-index，但这没有任何效果。
@AlphaX 不要忘记添加相对于徽标的位置以便能够使用 z-index
@AlphaX 我已经更新了 sn-p，猜测您的标记。您只需添加 position: relative 即可为徽标创建新的堆叠上下文。
@sol 是的，成功了！！！太感谢了！！！！这很奇怪，因为只要将位置设置为相对，它也可以在没有 z-index 的情况下工作！？