如何设计不固定高度的页面渐变背景答案

【问题标题】：How to design a gradient background of a page with unfixed height如何设计不固定高度的页面渐变背景
【发布时间】：2011-11-22 04:42:45
【问题描述】：

如何设计

1) 不固定高度的垂直渐变背景，

2) 一个固定高度的垂直渐变背景（比如 600px，从蓝色到白色到绿色），那么其余的颜色都是相同的绿色？

更新

现在新的设计是从上到下，120px固定高度从蓝色到白色，然后是不固定高度白色，然后120px固定高度从白色到绿色。如何编码？

【问题讨论】：

标签： html css

【解决方案1】：

有一种方法可以做到这一点，您需要利用可用的背景属性：

body {
    background-color: green;
    background-image: linear-gradient(blue, white, green);
    background-repeat: no-repeat;
    background-size: 100% 600px;
}

现场示例：http://jsfiddle.net/sl1dr/PxNhY/

如果您想要一个不固定的高度，请将 600px 替换为 100%。

编辑：这是根据您的更改的新解决方案：http://jsfiddle.net/sl1dr/EtYLZ/

【讨论】：

新方法不适用于滚动，它会调整到窗口大小，而不是body。
它适用于滚动，如果你想证明然后交换 body { height: 100%; } 对于身体 { 高度：2000px; }
是的，由于缺少内容，我在示例中使用了该示例。这不会是您网站上的问题，因为您有内容！
但是内容不够的时候，我还是希望body/html的高度是窗口的高度，怎么办？

【解决方案2】：

你可以试试crossbrowser (ie5.5+) 线性gradient generator

【讨论】：

【解决方案3】：

此链接：
Css Gradient From Green To White To Blue

或者您可以直接使用此链接：Gradient Generator 用于生成跨浏览器的 Css 3.0 背景。
您可以生成专业渐变并将代码粘贴到您自己的 css 文件中。
要知道css可能不支持IE的某些版本

【讨论】：