径向渐变CSS过渡

Question

我有一个带有background-image和radial-gradiant的div，如下所示：

.main-header {
z-index: 2;
padding: 1rem;
background: var(--themeColor3);
margin-bottom: 1rem;
padding-bottom: 3.5rem;
clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
text-align: center;
height: 300px;
background: radial-gradient(30% 65% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
background-repeat: no-repeat;
background-position: center;
transition: background 5s;
}

当我像这样悬停时，我正试图扩大径向梯度圆：

.main-header:hover {
background: radial-gradient(32% 75% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
background-repeat: no-repeat;
background-position: center;
}

这是我的JSX代码：

render() {
return (
<div className="container">
<header className="main-header">
</header>
</div>
)
}

Answer 1

不，不能在一个元素上同时使用这两个元素，因为渐变被渲染为背景图像：https://www.w3schools.com/css/css3_gradients.asp

您可以将一个透明元素放在悬停时具有更改不透明度的图像的元素之上(z索引(。

此外，渐变仍然不可转换，但正如我所提到的，您可以使用不透明度。或者尝试设置SVG 的动画