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

不幸的是，你不能在背景图像上使用过渡，但是你可以设置另一个元素坐在这个元素的顶部，并将该元素上的不透明度从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