Verbessern Sie Verlaufshintergründe mit CSS3-Übergängen

Question

Ich versuche, mithilfe von CSS einen Übergang auf einem Miniaturbild zu erstellen, sodass der Hintergrund beim Schweben eingeblendet wird. Die Konvertierung funktioniert nicht, aber wenn ich sie einfach in einen rgba()-Wert ändere, funktioniert es wunderbar. Unterstützt es keine Farbverläufe? Ich habe auch versucht, ein Bild zu verwenden, aber das Bild wird auch nicht konvertiert.

Ich weiß, dass es möglich ist, weil es jemand in einem anderen Beitrag getan hat, aber ich weiß nicht genau, wie. Irgendeine Hilfe> Hier ist etwas CSS, das verwendet werden kann:

#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 的回答。