css - 铬中模糊的线性渐变停止

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%);
}

Firefox 无问题。

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

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

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

Firefox中的渐变：

Firefox中的渐变

chrome中的渐变：

镀铬渐变

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

在此处输入图像描述

编辑

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

score 9 · Accepted Answer

不是解决问题的方法，只是一种解决方法……您可以使用多个渐变作为足够小尺寸的多个背景，以免触发问题（< ~300px 似乎可以做到）。background-size与and结合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。

score 1 · Accepted Answer

我刚刚在一个项目中有这个要求并以这种方式解决了它：

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

我希望它有所帮助。

score 1 · Accepted Answer

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

css - 铬中模糊的线性渐变停止

编辑

3 回答 3

Related

Reference