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

CSS过渡背景渐变

1 个答案: