是否有可能在大元素上形成一个硬边梯度？

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

有关此问题的铬有一个公开的错误报告.

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>

Answer 2

您可以使用框阴影获得相同的效果.

div {
  height: 5000px;
}
div {
  background: #0f0;
  box-shadow: inset 0 100px 0 0 #000;
}

<div></div>

Answer 3

这适合我.

background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%);

编辑:我试图完成你在问题中正在做的事情,而且我在两个盒子上都得到了很大的优势.您的问题必须与您的浏览器相关.

编辑2:确认