0

Hello I am using following code that works fine with Firefox, but does not work in Chrome.

background: -moz-linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;

I used WebKit also, but still it's not working.

4

5 回答 5

2

每个浏览器都有不同的渐变背景语法。此代码应涵盖最广泛使用的浏览器：

#gradient {
    /* For WebKit (Safari, Google Chrome etc) */
    background: -webkit-gradient(linear, left top, right bottom, from(#CAF579), to(#73CA08));
    /* For Mozilla/Gecko (Firefox etc) */
    background: -moz-linear-gradient(left top, #CAF579, #73CA08);
    /* For Internet Explorer 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF);
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CAF579FF, endColorstr=#73CA08FF)";
}

你可以在这里看到更多：http ://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

于 2012-10-03T06:50:15.600 回答
0 
 background: -webkit-linear-gradient(top , #CAF579, #73CA08) repeat scroll 0 0 transparent;
于 2012-10-03T06:47:11.070 回答
0

CSS 渐变的语法有点复杂。

有 5 种不同的语法 - 4 种已弃用的语法（旧的 ie filter、新的 ie -ms-filter、旧的 webkit -webkit-gradient、新的 mozilla -moz-linear-gradient（加上一组供应商前缀以用于不同的浏览器（-moz-、-webkit-、-ms-、-o-））和无前缀的标准linear-gradient（与以前的有很大区别处理渐变角度的版本）。

在您的情况下，对于 Google Chrome ，您需要添加-webkit-linear-gradient到您的 css。另外，无前缀版本，因为它预期 Chrome 和 Safari 将很快支持标准语法。

详情参考MDN：https ://developer.mozilla.org/en-US/docs/CSS/linear-gradient

于 2012-11-03T14:00:57.990 回答
0

chrome的某些版本（新版本）识别标准语法而不是-webkit ie

background: linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;

因此，您应该始终将其与-moz和-webkit（为了与旧版本兼容）组合在一起，例如：

background: -moz-linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent; 
background: -webkit-linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;
background: linear-gradient(center top , #CAF579, #73CA08) repeat scroll 0 0 transparent;

检查此链接以获取更多信息。

于 2012-10-03T06:58:31.370 回答
0

对于 chrome，您必须使用-webkit-gradient而不是-moz-linear-gradient. 请注意，它也有不同的语法，例如：

background: -webkit-gradient(linear, center top, center bottom , from(#CAF579), to(#73CA08)) repeat scroll 0 0 transparent;

有关更多示例，请参见此页面：http ://webdesignerwall.com/tutorials/cross-browser-css-gradient

于 2012-10-03T06:47:32.160 回答