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

Question

请参阅：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);

}

如果你使用firefox打开网站，你会在白色和灰色之间得到一条清晰的切割线而没有任何渐变：

如果您使用镶边打开网站，则会获得一个5px'灰色渐变，其中白色结束并且灰色开始：

我如何制作它以便颜色突然停止而不在webkit浏览器上显示实际渐变，就像它目前在firefox上一样？

干杯 ģ

Answer 1

尝试在Microsoft的网站（Yep，Microsoft）上使用此css工具：

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

Answer 2

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

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

Answer 3

这只是webkit和amp;之间的区别。壁虎。不幸的是，在如此大的渐变大小上，看起来像webkit采用“快速”路线来渲染巨大的渐变（不要忘记渐变是浏览器生成的图像）并且在某种程度上模糊不清。

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

请参阅小提琴：http://jsfiddle.net/3ampp/

Answer 4

你试过这个吗？

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

Answer 5

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

html {
   background: #eee; 
   }

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

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

Answer 6

这适用于所有浏览器：

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

虽然您尝试实现的效果不需要渐变。

Answer 7

正如egid所说，chrome确实采用快速路线来渲染渐变。请参阅this SO question和this pen进行精彩的动画演示。