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

我可以像这样做吗？：

由于这是一个Linux主题，所以在这种情况下也无法编辑HTML。

- DIES

---

您可以简单地在其中一半上方放置一个黑色的div。请确保使用z-index将其提前。 - DMrFrost

@DMrFrost 如果我能的话，我一定会编辑HTML的，但这是不可能的。 - DIES

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>

- Ori Drori

---

我已经添加了另一个选项，如果您想要有两个线性渐变，那可能更适合。 - Ori Drori

Answer 2

1. 使用background-size: 100% 50%将渐变设置在容器的一半。
2. 使用background-image: radial-gradient(circle 50vh at 50% 100%, #00bffb, #0000);将渐变圆形定位，使其只有顶部一半可见。

解释：

circle 50vh 将渐变半径设置为容器大小的一半（必须使用固定大小，因此 50vh 或者如果您的容器高度为400px，则为 200px - 不幸的是，百分比无法使用）

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

- Adam Jagosz

---

这个答案需要更多的关注和喜爱！ - Mike

@Mike 谢谢！我更新了答案，让它更加值得喜爱。 - Adam Jagosz