css - CSS：Firefox 中的模糊线性渐变

Question

CSS 线性渐变背景元素在颜色之间具有模糊的过渡，即使停靠点位于同一位置。

我有一个背景定义如下的元素：

background:linear-gradient(to right,
    blue, blue 10%,
    red 10%, red 30%,
    yellow 30%, yellow 40%,
    green 40%, green 50%,
    black 50%
  );

在 Firefox 中，颜色之间的过渡是模糊的。如果我使用 arepeating-linear-gradient边缘很脆。两者在 Chrome 中都很清晰。

我在这里有一个示例笔：https ://codepen.io/anon/pen/rPVWZE?editors=1100#0

有想法该怎么解决这个吗？

标签： csslinear-gradients

Answer 1

这里对FF的影响。我画了一些像素来显示缩放级别：

一种解决方法：

.linear{
  height:100px;
  
  background-image:
        linear-gradient(to right, blue 0, blue 100px),
        linear-gradient(to right, red 0, red 100px),
        linear-gradient(to right, yellow 0, yellow 100px);
  
  background-size:
        100px 100px,
        100px 100px,
        100px 100px;
  
  background-position:
        0 0,
        100px 0,
        200px 0;
  
  background-repeat: no-repeat;
}

<div class = "linear"></div>