CSS过渡背景渐变

Question

我正在尝试让CSS过渡在背景渐变中淡出。

当它只是平面颜色时，我有过渡工作，但现在我已经将其更改为径向梯度，它立即出现。我想这也可能与我使用半透明颜色作为颜色值之一有关。

.cta-01 .cta a:hover {
    background-image:
        radial-gradient(
          circle,
          rgba(0, 0, 0, .75),
          rgba(0, 0, 0, 1)
        );
    -webkit-transition: background-image 250ms linear;
    -moz-transition: background-image 250ms linear;
    -o-transition: background-image 250ms linear;
    -ms-transition: background-image 250ms linear;
    transition: background-image 250ms linear;
}

有人能看出我做错了什么吗?

Answer 1

不幸的是，你不能在background-image上使用过渡，但是你可以在这个元素的顶部设置另一个元素，并设置该元素的不透明度从1到0 -这将慢慢显示你的渐变。

我已经用div和借用你的类拼凑了一个例子:

<div class="cta-01">
    <div class="cta" >
        <div class="dummybg"></div>
    </div>
</div>

.cta {
    height:100px;
    width:100px;
}
.dummybg {
    height:100px;
    width:100px;
    background-color:white;
    opacity:1;
    transition:opacity 1s
}
.dummybg:hover {
    opacity:0;
}
.cta-01 .cta:hover {
    background-image:
    radial-gradient(
    circle,
    rgba(0, 0, 0, .75),
    rgba(0, 0, 0, 1)
    );
    -webkit-transition: background-image 250ms linear;
    -moz-transition: background-image 250ms linear;
    -o-transition: background-image 250ms linear;
    -ms-transition: background-image 250ms linear;
    transition: background-image 250ms linear;
}

这里是一个小提琴