身体 CSS 渐变，停止并继续为纯色

【问题标题】：Body CSS Gradient that Stops and Continues as Solid Color身体 CSS 渐变，停止并继续为纯色
【发布时间】：2011-11-19 16:21:30
【问题描述】：

此处已提出与此问题类似的问题- HTML/CSS Gradient that stops at a particular height and continues further with a solid color，但据我所知，在将它用于背景颜色时，这不起作用 - 这是我想要实现的。

具体来说，我希望它在页面顶部为浅蓝色，向下渐变为深蓝色 200 像素，然后一直保持为深蓝色。

感谢任何可以提供帮助的人，

阿尔弗。

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

这应该可以解决问题。实例：http://jsfiddle.net/tw16/mBUZt/

我使用了最新的 css3 渐变格式：

html,body{height: 100%} /* added this as the example is an empty page */
body{
    background:    -moz-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background: -webkit-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:      -o-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:     -ms-linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
    background:         linear-gradient(top, #319ef7 0%,#1b388e 200px,#1b388e 100%);
}

【讨论】：

@alfo：在body 上使用纯色和渐变的区别在于，它需要100% 的高度。您将在我的实时示例中看到这一点。