【问题标题】：Blurry linear gradient stops in chrome铬中模糊的线性渐变停止
【发布时间】：2014-12-26 11:22:59
【问题描述】：

如果我使用这样的多个停靠点的线性渐变：

div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

火狐没有问题。

铬渐变颜色之间的过渡是模糊的。我正在重用一个位置来定义一种新颜色，因此在位置 35 上，颜色会立即从 #001500 变为 #ffffff（或至少应该如此）。如果 div 更高，渐变停止之间的模糊度会增加。

IE 像铬一样有一些模糊，但不那么极端。就像在 Chrome 中一样，如果 div 更高，模糊度会增加。

http://jsfiddle.net/cyq7grdr/5/

firefox中的渐变：

chrome 中的渐变：

当 div 不高时 chrome 中的渐变（1000 像素而不是 2000 像素）：

编辑

这似乎在 chrome 中已修复，但在 firefox 中引入。如果有人能证实这一点，我会很高兴。

【问题讨论】：

相关：code.google.com/p/chromium/issues/detail?id=140208
有解决办法吗？看来这不会很快解决...
我绝对讨厌这样说...但是使用图像。 repeat-x 只需 1px 宽。
如果最后一个渐变使用两种颜色而不是 #fffff 到 #fffff 则不会正确拉伸，就像在这种情况下，不好的例子！
我说的是垂直拉伸（到 100%）

标签： css google-chrome linear-gradients gradientstop

【解决方案1】：

不是解决问题的方法，只是一种解决方法……您可以使用多个渐变作为足够小尺寸的多个背景，以免触发问题（background-size 和background-position，你会得到一些丑陋但有效的东西：

background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

请参阅JSFiddle 进行演示。

【讨论】：

【解决方案2】：

我刚刚在一个项目中有这个需求，就这样解决了：

假设我们希望颜色变化为 50%。

我们必须将第一种颜色的渐变设置为从 0% 到 51%。
下一个颜色的渐变从 50% 到 100%。

通过这种方式，它们重叠并产生切色效果。

.background-overlap {
  background: rgb(97, 0, 189);
  background: linear-gradient(0deg, rgba(46, 49, 49, 1) 0%,  rgba(46, 49, 49, 1) 51%, rgba(232, 232, 232, 1) 50%, rgba(232, 232, 232, 1) 100%);
}

.mydiv {
  height: 90vh;
  width: 100%;
}

&lt;div class="background-overlap mydiv"&gt;&lt;/div&gt;

希望对你有帮助。

【讨论】：

【解决方案3】：

解决此问题的有效解决方法：只需使用多个线性背景作为背景（这在 CSS 3 中很容易实现）并使用 transparent 背景颜色作为空占位符，以便通过以下方式看到其他线性背景：

background: 
    linear-gradient(to right, 
      green 10%, 
      yellowgreen 10%, yellowgreen 20%, 
      yellow 20%, yellow 30%, 
      orange 30%, orange 40%, 
      red 40%, red 50%, 
      grey 50%, grey 60%,
      blue 60%, blue 70%,
      transparent 70%
    ),
    linear-gradient(to right,
      green 70%, 
      yellowgreen 70%, yellowgreen 80%, 
      yellow 80%, yellow 90%,
      salmon 90%
    );

为防止出现模糊问题，上例中的所有线性渐变仅定义了 7 个显式渐变终点。（请注意，第一个线性渐变定义了第 8 个渐变停止点，但不是显式的结束点，而只是开始点，因为没有必要明确定义开始点的开始点或结束点的结束点渐变的大小（0% 自动用作起点，100% 自动用作终点），因此不会触发模糊错误。）上面的渐变必须使用透明部分才能使下面的渐变可见并且仍然急剧结束块状视觉效果的渐变。

Codepen with bug and workaround demonstration.