CSS Gradients with little content: Fix has problem with Chrome

问题

I asked a question CSS Gradients with little content some time back

I came up with a possible fix http://jsfiddle.net/aruUS/2/

html, body { min-height: 100% }
body { 
    background: -moz-linear-gradient(top, blue, red 200px); 
    background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}

only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?

回答1:

Simply remove the px from 200px. Pixel values are unitless in Webkit's gradient syntax. I.e.

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));

See the Surfin' Safari blog's Introducing CSS Gradients:

A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.

Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.

回答2:

try this:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

More information for -webkit-gradient visit: http://webkit.org/blog/175/introducing-css-gradients/

Live example: http://jsfiddle.net/aruUS/3/

Tool to help you more: http://gradients.glrzad.com/

来源：https://stackoverflow.com/questions/4968896/css-gradients-with-little-content-fix-has-problem-with-chrome