使用CSS3过渡效果与渐变背景

Question

使用CSS3过渡效果与渐变背景

277

我正在尝试使用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)))
}

- alt

7

IE10 现在支持渐变过渡，这是一个令人高兴的惊喜！ - sirmdawg

@mkprogramming，喔哈，它真的看起来很棒！这里有一个演示（适用于IE10+）。希望其他浏览器也能支持这个酷炫的东西。 - Qtax

这个网站提供了最好的解决方案，对我很有用：http://nimbupani.com/some-css-transition-hacks.html - Shine Cardozo

21个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matrix · Answer 1

非常感谢您。

.element {
  position: relative;
  width: 200px;
  height: 150px;
  background-image: linear-gradient(45deg, blue, aqua);
  z-index: 2;
}

.element::before {
  position: absolute;
  content: "";
  inset: 0; /* same as { top: 0; right: 0; bottom: 0; left: 0; } */
  background-image: linear-gradient(to bottom, red, orange);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.element:hover::before {
  opacity: 1;
}

<body>
  <div class="element"></div>
</body>