有可能在大元素上制作硬边渐变吗？ [英] Is it possible to make a hard-edged gradient on a large element?

问题描述

我在一个特别大的元素上使用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>

这篇关于有可能在大元素上制作硬边渐变吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！