有可能在大元素上制作硬边渐变吗?

2022-04-12 00:00:00 gradient css linear-gradients

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

在较小的元素上,可以通过以下方式获得硬边:

background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);
但是,当元素的高度非常大时,边缘是软的。您可以在下面的图像和示例中看到,当元素非常大并且应用了相同的渐变时,第二个版本具有柔和的边缘。

我尝试了许多线性渐变的变体,但无法在大版本上获得清晰的边缘。有没有办法在大元素上应用带有硬边的渐变?

Html示例:

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
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>

编辑

此渐变的目标是用于其他背景图像,因此我更喜欢与以下内容兼容的技术(不要覆盖图像):

数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">
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。


解决方案

我已经找到了使用渐变实现相同效果的替代方法,但是我认为使用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>

相关文章