Question

如何设计

1）具有不固定高度的垂直渐变背景

2）具有固定高度的垂直渐变背景（例如600px，从蓝色到白色到绿色），其余的具有相同的绿色？

的更新 的

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

Answer 1

您可以尝试跨浏览器（ie5.5 +）线性gradient generator

Answer 2

有一种方法可以实现，您需要利用可用的背景属性：

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

实例：http://jsfiddle.net/sl1dr/PxNhY/

如果你想要一个不固定的高度，那么用100％替换600px。

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

Answer 3

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

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

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

3 个答案: