CSS：底部50％的径向渐变切片用于另一个类似的径向渐变？

Question

如果我有这个：

https://codepen.io/anon/pen/MveydB

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

我怎么能有这样的东西？：

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

Answer 1

用线性渐变覆盖

在其上面涂上半透明的半黑色线性渐变。

＆＃13;

＆＃13;

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

body {
  margin: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强> 或

使用伪元素覆盖

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

可以用大小限制现有的radial-gradient图像，而不用其他元素或linear-gradient图像覆盖radial-gradient：

.bg {
  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;

  /* equivalent to: */

  background: #000 radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000) 0 0 / 100% 50% no-repeat;
} 

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