2

参考：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 的灰色渐变，白色结束，灰色开始：

铬截图

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

干杯

4

7 回答 7

5

尝试在 Microsoft 的网站（是的，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%);
于 2012-05-11T06:10:08.770 回答
2

从在测试用例中重现这一点的一些尝试来看，问题可能是 Webkit 的实现在计算html没有直接指定高度时的确切高度时遇到了麻烦。将 a 设置height为 100% 或固定像素高度似乎可以清除它。但是我怀疑这是一个实用的解决方案。在我自己的使用中，我没有注意到这是其他元素的问题，所以也许它对在html.

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

于 2012-04-27T14:05:59.587 回答
2

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

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

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

于 2012-05-10T20:20:36.523 回答
1

你试过这个吗？

background: -moz-linear-gradient( top, #FFFFFF 500px, #EEEEEE 520px );
于 2012-05-11T15:05:39.947 回答
0

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

html {
   background: #eee; 
   }

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

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

在此处输入图像描述

于 2012-05-06T13:15:36.103 回答
0

这适用于所有浏览器：

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

尽管您想要达到的效果不需要渐变。

于 2012-05-11T06:20:32.407 回答
0

正如 egid 所说，chrome 确实采用了渲染渐变的快速路线。看到这个 SO question和this pen进行很酷的动画演示。

于 2014-06-09T10:46:02.540 回答