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;
}

这是一个小提琴jsfiddle