修改

Question

如果我使用具有多个停靠点的线性渐变，请执行以下操作：

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中的渐变：

gradient in firefox

chrome中的渐变：

gradient in chrome

当div不太高（1000px而不是2000px）时，chrome中的渐变：

enter image description here

修改

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

Answer 1

不是问题的解决方法，只是解决方法...你可以使用多个渐变作为足够小的多个背景，以便不触发问题（＆lt; ~300px似乎这样做）。与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了解演示。

Answer 2

此问题的有效解决方法：只需为背景使用多个线性背景（这在 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.

相关的 Chrome 问题：

PostCSS 插件，用于自动分离具有过多停止点的渐变：https://github.com/strarsis/postcss-blurry-gradient-workaround

注意：border-image 的梯度也会出现相同的问题。但与 border-image 相比，background-image 不支持多个图像或渐变。

Answer 3

我只是在项目中有此要求，并通过以下方式解决了它：

假设我们希望颜色变化为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%;
}

<div class="background-overlap mydiv"></div>

我希望这会有所帮助。

模糊的线性渐变停止在铬

修改

3 个答案: