我在特别大的元素上使用线性渐变遇到了问题.
在较小的元件上,可以通过以下方式实现硬边缘：
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 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,#0f0 0);
}
<div></div>
编辑2
感谢@Tarun,这似乎与浏览器有关.上图是Chromium 45的截图.Safari和Firefox似乎正确渲染.
编辑3
关于这个问题,有一个关于铬的开放bug report.
解决方法
我已经找到了使用渐变来实现相同效果的替代方案,但是我认为应该可以通过1个渐变实现这一点,所以我认为这是一种解决方法.
诀窍是使用具有2个渐变的多个背景,这些渐变不会改变颜色.然后只需定义背景大小即可实现硬边效果.查看工作代码段：
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>
