将CSS3变换与渐变背景一起使用

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

我知道这是可能的,就像在另一篇文章中有人做的那样,但我不知道到底是怎么做的。任何帮助>这里有一些CSS可以使用:

#容器分区a{
-webkit过渡:背景0.2s线性;
-moz过渡:背景0.2s线性;
-o-过渡:背景0.2s线性;
过渡:背景0.2s线性;
位置:绝对位置;
宽度:200px;
高度:150像素;
边框:1px#000实心;
利润率:30像素;
z指数:2
}
#货柜舱a组:悬停{
背景:-webkit梯度(径向,1007510010075,0,从(rgba(0,0,0,7))到(rgba(0,0,0,4)))
}

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

如果想要背景渐变的淡入效果,则必须在容器元素上设置不透明度,并对不透明度进行“过渡”

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

更新日期:2018年10月
带有未加前缀的新语法的渐变过渡[例如,径向渐变(…)]现在已确认(再次?)在Microsoft Edge 17.17134上有效。我不知道这是何时添加的。在最新的Firefox和Chrome/Windows 10上仍不起作用

发表评论