Question

我在一段时间后回答了问题CSS Gradients with little content

我想出了一个可能的解决方法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));
}

只有Firefox部分有效，看来webkit只支持颜色停止的百分比？无论如何要做到这一点？

Answer 1

试试这个：

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

-webkit-gradient访问的更多信息：http://webkit.org/blog/175/introducing-css-gradients/

实例：http://jsfiddle.net/aruUS/3/

可以为您提供更多帮助的工具：http://gradients.glrzad.com/

Answer 2

只需从px移除200px即可。在Webkit的渐变语法中，像素值是无单位的。即。

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

参见Surfin的Safari博客Introducing CSS Gradients：

一个点是一对空格分隔的值。语法支持点值的数字，百分比或关键字top，bottom，left和right。

数字没有单位，而 length 则与according to the CSS specification相对应。

内容很少的CSS Gradients：修复了Chrome的问题

2 个答案: