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