Gradient background is not working with Chrome

问题:

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.

回答1:

Each browser has different syntax for gradient backgrounds. This code should cover the most widely used browsers:

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

You can see more here: http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

回答2:

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

回答3:

For chrome you would have to use -webkit-gradient instead of -moz-linear-gradient. Note that it also has a different syntax, e.g. something like this:

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

See this page for more examples: http://webdesignerwall.com/tutorials/cross-browser-css-gradient

回答4:

Some versions (new versions) of chrome identify the standard syntax instead of -webkit i.e

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

So you should always include this with combination to -moz and -webkit (for compatibility with older versions) like:

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;

check this link for more information.

回答5:

CSS gradients have a bit complicated syntax.

There are 5 of different syntaxes - 4 deprecated ones (old ie filter, newer ie -ms-filter, old webkit -webkit-gradient, newer mozilla -moz-linear-gradient (plus a set of vendor prefixes to work with different browsers (-moz-, -webkit-, -ms-, -o-)) and unprefixed standard linear-gradient (which has major difference from previous versions in handling gradient angles).

In your case, for Google Chrome you need to add -webkit-linear-gradient to your css. Plus, unprefixed version, because its expected, that Chrome and Safari will support standard syntax soon.

Refer to MDN for details: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient