css - 是否可以在大元素上制作硬边渐变？

Question

我在一个特别大的元素上使用 linear-gradient 时遇到了问题。

在较小的元素上，可以通过以下方式实现硬边:

background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);

但是当元素的高度很大时，边缘会变软。您可以在下图和下面的示例中看到，当元素非常大并且应用了相同的渐变时，第二个版本具有柔和的边缘。

我在线性渐变上尝试了很多变化，但无法在大版本上实现硬边。有没有办法在大元素上应用带有硬边的渐变？

HTML 示例:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>

编辑

这个渐变的目标是与另一个背景图像一起使用，所以我更喜欢与以下兼容的技术(不要覆盖图像):

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}

<div></div>

编辑2

感谢@Tarun，这似乎与浏览器有关。上图是 Chromium 45 的屏幕截图。Safari 和 Firefox 似乎可以正确呈现。

编辑3

有一个开放的bug report对于这个问题的 Chrome 。

Answer 1

我找到了一种使用渐变来实现相同效果的替代方法，但我认为应该可以使用 1 个渐变来实现此效果，因此我认为这是一种变通方法。

诀窍是使用具有 2 个不改变颜色的渐变的多个背景。然后定义background-size即可实现硬边效果。查看工作片段:

div {
  height: 5000px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
  background-size: 100% 20px, 100%;
}
div:first-child {
  height: 100px;
}

<div></div>
<div></div>