使用带有渐变背景的 CSS3 过渡 [英] Use CSS3 transitions with gradient backgrounds

问题描述

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

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.

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

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 还不支持过渡(尽管目前的规范说他们应该通过插值支持像渐变到像渐变过渡.).

Gradients don't support transitions yet (although the current spec says they should support like gradient to like gradient transitions via interpolation.).

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

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.

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

(There have been some browser releases that supported transitions on gradients (e.g IE10. I tested gradient transitions in 2016 in IE and they seemed to work at the time, but my test code no longer works.)

更新:2018 年 10 月带有不带前缀的新语法的渐变转换 [e.g.Radial-gradient(...)] 现在确认(再次?)在 Microsoft Edge 17.17134 上工作.不知道什么时候加的仍然无法使用最新的 Firefox &Chrome/Windows 10.

Update: October 2018 Gradient transitions with un-prefixed new syntax [e.g. radial-gradient(...)]now confirmed to work (again?) on Microsoft Edge 17.17134. I don't know when this was added. Still not working on latest Firefox & Chrome / Windows 10.

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