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打开网站,你会在白色和灰色之间得到一条清晰的切割线,而不会有任何渐变:

如果您使用chrome打开网站,则会获得一个5px'ish灰色渐变,其中白色结束并且灰色开始:

如何使颜色突然停止而不在webkit浏览器上显示实际的渐变,就像它目前在firefox上一样？

干杯G.

Answer 1

尝试在微软的网站上使用这个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%);