将 CSS3 过渡与渐变背景结合使用

Question

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

我知道这是可能的，因为在另一篇文章中有人做到了，但我不知道到底是怎么做到的。任何帮助> 这是一些可以使用的 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

一种解决方法是转换背景位置以产生渐变变化的效果： http://sapphion.com/2011/10/css3-渐变过渡与背景位置/

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}  

<div id="DemoGradient"></div>  

Answer 2

渐变尚不支持过渡（尽管当前规范表示它们应该支持通过插值实现类似渐变到类似渐变的过渡。）。

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

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

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

更新：2021 年 12 月 现在，在最近的基于 Chromium 的浏览器中可以使用 @property 解决方法（但在 Firefox 中不起作用）。请参阅（并投票）下面（或上面 YMMV）@mahozad 的回答。