css - 使用具有渐变背景的 CSS3 过渡

Question

我正在尝试在悬停时使用 css 在缩略图上进行过渡，以便在悬停时背景渐变淡入。过渡不起作用，但如果我只是将其更改为 rgba()值，它工作正常。不支持渐变吗？我也试过使用图像，它也不会转换图像。

我知道这是可能的，因为在另一篇文章中有人做到了，但我不知 Prop 体是怎么做到的。任何帮助> 这里有一些 CSS 可以使用:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

Answer 1

渐变还不支持过渡(尽管当前规范说它们应该通过插值支持从 like gradient 到 like gradient 的过渡。)。

如果您想要背景渐变的淡入效果，您必须在容器元素上设置不透明度，并“过渡”不透明度。

(有一些浏览器版本支持渐变过渡(例如 IE10。我在 2016 年在 IE 中测试了渐变过渡，当时它们似乎可以工作，但我的测试代码不再有效。)

更新:2018 年 10 月具有无前缀新语法的渐变过渡[例如radial-gradient(...)] 现在确认可以(再次？)在 Microsoft Edge 17.17134 上工作。不知道什么时候加的。仍然无法在最新的 Firefox 和 Chrome/Windows 10 上运行。

更新:2021 年 12 月这现在可以在最近使用 @property 解决方法的基于 Chromium 的浏览器中实现(但在 Firefox 中不起作用)。请参阅(并投票)@mahozad's answer低于(或高于 YMMV)。