css3 线性渐变颜色停止在 webkit 上的工作方式不同答案

【问题标题】：css3 linear gradient color stop works differently on webkitcss3 线性渐变颜色停止在 webkit 上的工作方式不同
【发布时间】：2012-05-08 06:32:51
【问题描述】：

参考：www.get-offit.com

转到书籍封面几乎结束并且背景颜色发生变化的位置：

我们有：

html {
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(5, #FFFFFF), to(#EEEEEE));
background: -webkit-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);

}

如果你用火狐打开网站，你会在白色和灰色之间看到一条清晰的线，没有任何渐变：

如果你用 chrome 打开网站，你会得到一个 5px 的灰色渐变，白色结束，灰色开始：

如何使颜色突然停止而不像当前在 Firefox 上那样在 webkit 浏览器上显示实际渐变？

干杯 G

【问题讨论】：

我没有尝试过，但是添加一个白色或灰色的“色标”，并将其置于过渡中心是否有帮助？
你能给我看一个样本吗？
我不明白你为什么在这里使用 CSS 渐变。
这个想法是利用渐变规则的可能性，包括这个颜色停止，然后我想跟进实际的渐变

标签： css webkit cross-browser

【解决方案1】：

通过在测试用例中重现这一点的一些尝试，问题可能是 Webkit 的实现在没有直接指定高度时无法计算 html 的确切高度。将height 设置为 100% 或固定像素高度似乎可以清除它。但是我怀疑这是一个实用的解决方案。在我自己的使用中，我没有注意到这是与其他元素有关的问题，所以也许在html 上使用线性渐变是特别的。

如果它是 Webkit 的错误，那么您最好的解决方案可能是重新设计您的 css，以便可以将灰色背景应用于元素。显然这是一个很大的改变来适应 Webkit，但它也会使背景与旧版本的 IE 兼容。

【讨论】：

我都试过了 height:100%;和高度：1000px；对于 html {} 并且没有可见的变化。我会继续做测试
@Sotkra 我在测试时看到了同样的问题。它看起来更像是一个 Webkit 错误，因为 Firefox 处理得很好。
是的，这真的让我感到好奇。你见过 webkit 正确处理这些“原始”颜色停止的情况吗？
我有，但尺寸很小。这是一个相当大的梯度。

【解决方案2】：

如果你想在 webkit 中实现从 #fff 到 #eee 的稳固过渡，我认为你必须将渐变放在一边。如果你像这样设置你的 CSS

html {
   background: #eee; 
   }

   body {
      background: #fff;
      height: 500px;
      }

它将复制您尝试使用渐变实现的目标。（见屏幕截图）它也将是跨浏览器兼容的。我希望这会有所帮助。

【讨论】：

我知道，这个问题围绕着线性梯度实现中的跨浏览器差异，而不是“我如何实现 x 效果”。

【解决方案3】：

这只是 webkit 和 gecko 的区别。不幸的是，在如此大的渐变尺寸上，看起来 webkit 采用了“快速”路线来渲染巨大的渐变（不要忘记渐变是浏览器生成的图像），并且给它带来了一些模糊性。

尝试在 webkit 中使用background-position-y: 500px; 强制渐变从顶部开始 500px。

见小提琴：http://jsfiddle.net/3ampp/

【讨论】：

【解决方案4】：

尝试在 Microsoft 网站上使用这个 css 工具（是的，Microsoft）：

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

它将有助于生成跨浏览器的 css 代码（不仅仅是 IE），并且还可以在稍微改变渐变效果时派上用场。您可以添加更多的渐变点，甚至可以尝试不同的颜色。

这是来自在线工具的代码示例：

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EEEEEE));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);

【讨论】：

【解决方案5】：

这适用于所有浏览器：

html {
background: -moz-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -ms-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -o-linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
background: -webkit-linear-gradient(#FFFFFF 500px, #EEEEEE 0px);
background: linear-gradient(top, #FFFFFF 500px, #EEEEEE 0px);
}

虽然你想要达到的效果不需要渐变。

【讨论】：

【解决方案6】：

你试过了吗？

background: -moz-linear-gradient( top, #FFFFFF 500px, #EEEEEE 520px );

【讨论】：

好吧，这里的问题在于 webkit 但是...在声明的#eee 部分添加 520px 不会产生预期的效果

【解决方案7】：

正如 egid 所述，chrome 确实采用了渲染渐变的快速路线。请参阅 this SO question 和 this pen 以获得很酷的动画演示。

【讨论】：