【问题标题】: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% 的高度。您将在我的实时示例中看到这一点。
    猜你喜欢
    • 2011-06-28
    • 2012-11-22
    • 1970-01-01
    • 1970-01-01
    • 2013-07-29
    • 2012-07-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多