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

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。

Answer 1

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

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

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

这对我有用。

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

编辑：我已经尝试完全按照您在问题中所做的事情，并且我在这两个盒子上都获得了强硬优势。您的问题一定与您的浏览器有关。

编辑 2： 确认

Answer 3

你可以使用盒子阴影来达到同样的效果。

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

<div></div>

Answer 4

您需要以一种棘手但富有表现力的方式重复每种颜色和linear-gradient 的每个百分比。让我们在六种颜色的示例中查看它以了解其原理。 这种方法适用于任何大小的块。

div {
  height: 100px;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  background-image:
      linear-gradient(90deg,
                       red,
                       red     17%,
                       orange  17%, 
                       orange  34%, 
                       yellow  34%,
                       yellow  51%,
                       black   51%,
                       black   68%,
                       green   68%,
                       green   85%,
                       blue    85%);
}
  

<div></div>

Answer 5

您可以使用更多的代码空间并设置您的 gardient，如下所示：

background: #4c4c4c;
background: linear-gradient(to bottom,  #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );

纯色背景设置可确保您的页面在浏览器不支持这种类型的 gardient 或其过滤器时显示某种颜色。

最好包含 -moz、-o 和其他基于浏览器的修复程序以确保。