CSS：在底部切片径向渐变 50% 以获得另一个类似的径向渐变？

Question

如果我有这个：

body {
  width: 100vh; height: 100vh;
  background-image: radial-gradient(circle closest-side, #00bffb, rgba(0, 0, 0, 1)); 
}

我怎么能有这样的东西呢？:

在这种情况下也无法编辑 HTML，因为它是 Linux 的主题。

Answer 1

用线性渐变覆盖

在上面画一个半透明、半黑色的线性渐变。

.bg {
  width: 100vh;
  height: 100vh;
  background: linear-gradient(to bottom, transparent 50%, black 50%),
              radial-gradient(circle closest-side, #00bffb, black);
}

body {
  margin: 0;
}

<div class="bg"></div>

或

用伪元素覆盖

如果要创建具有两半不同颜色的径向渐变，可以使用父元素一半高度的伪元素。

.bg {
  position: relative;
  width: 100vh;
  height: 100vh;
  background: radial-gradient(circle closest-side, yellow, black);
}

.bg::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vh;
  height: 50%;
  background: radial-gradient(circle closest-side, #00bffb, black);
  background-size: 100% 200%; /** we need to compensate for the 50% height **/
  content: '';
}

body {
  margin: 0;
}

<div class="bg"></div>

Answer 2

使用background-size: 100% 50%、
使用 background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000);

解释：

circle 50vh 将渐变半径设置为容器大小的一半（您需要使用固定大小，因此 50vh，或者 200px 如果您的容器是 400 像素高 —遗憾的是，% 不起作用）

at 50% 100%设置渐变中心在背景框底边的中间

body {
  width: 100vh;
  height: 100vh;
  background-color: #000;
  background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000); 
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

https://codepen.io/hyvyys/pen/xxKRGwP

CSS：在底部切片径向渐变 50% 以获得另一个类似的径向渐变？

CSS: Slice radial-gradient 50% on bottom for another similar radial-gradient?

css

radial-gradients