径向渐变 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

不，您不能在一个元素上同时使用这两种元素，因为渐变呈现为 background-images： https://www.w3schools.com/css/css3_gradients.asp

您可以在 (z-index) 带有悬停时改变不透明度的图像的上方放置一个透明元素。

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

径向渐变 CSS 过渡

Radial Gradient CSS Transition

css

css-transitions

transition

radial-gradients