使用CSS3渐变与渐变背景 [英] Use CSS3 transitions with gradient backgrounds

问题描述

我试图转移悬停与css缩略图，以便悬停，背景渐变渐变。转换不工作，但如果我只是更改为一个rgba（）值，它工作正常。是否不支持渐变？我尝试使用图片，它也不会转换图片。

我知道这是可能的，因为在另一个帖子有人做了，但我不能出来怎么样。任何帮助>这里有一些CSS使用：

  #container div a {
 -webkit-transition：background 0.2线性; 
 -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， 0，从（rgba（0,0,0，.7））到（rgba（0,0,0，.4）））
} 
  pre> 
 
解决方案
渐变不支持转换（虽然规范说他们应该）。 
 
 
 
如果您想使用背景渐变渐变效果，
 
 
 
您必须设置 opacity 和transition的不透明度。 
 
 
 
（我想查看您说完成的另一篇文章。）
 
 
 
 strong>更新： IE10 +现在支持渐变过渡 
 
I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an image too, it won't transition the image either.

I know it's possible, as in another post someone did it, but I can't figure out how exactly. Any help> Here's some CSS to work with:
#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)))
}

解决方案
Gradients don't support transitions yet (although the spec says they should). 

If you want a fade-in effect with a background gradient, 

you have to set an opacity on a container element and 'transition` the opacity. 

(and I'd like to see the other post where you say it was done.)

Update: IE10+ now supports gradient transitions

                        
这篇关于使用CSS3渐变与渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！