Question

您好我使用的以下代码适用于Firefox，但在Chrome中无效。

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

我也使用了WebKit，但它仍然没有用。

Answer 1

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

#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/

Answer 2

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

Answer 3

对于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

Answer 4

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

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;

查看此link以获取更多信息。

Answer 5

CSS渐变语法有点复杂。

有5种不同的语法 - 4种不推荐的语法（旧的filter，较新的-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

渐变背景不适用于Chrome

5 个答案: