CSS渐变作为图层下降

Question

所以，这是我的问题，我试图获得这种效果

所以我使用这个CSS

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #5FC7F4),
    color-stop(1, #069ADA)
);
background-image: -o-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -moz-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -webkit-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: -ms-linear-gradient(bottom, #5FC7F4 0%, #069ADA 100%);
background-image: linear-gradient(to bottom, #5FC7F4 0%, #069ADA 100%);

现在发生的事情就是当我使用它时，我得到了

正如你所看到的那样，有＃34;层＆＃34;，它并不完全是＆＃34;平滑＆＃34;梯度。这是一个演示http://jsfiddle.net/U4FU3/

和想法？

Answer 1

你的渐变没有错 - 你只需要像这样设置高度：

html, body {
    height: 100%;
}

Answer 2

#gradient {
height: 200px;
background: -webkit-linear-gradient(#5FC7F4, #069ADA ); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#5FC7F4, #069ADA ); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#5FC7F4, #069ADA ); /* For Firefox 3.6 to 15 */
background: linear-gradient(#5FC7F4, #069ADA); /* Standard syntax (must be last) */
}

这似乎工作正常

看看这个例子： http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear