如何设计具有不固定高度的页面的渐变背景 [英] How to design a gradient background of a page with unfixed height

问题描述

如何设计

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

1) a vertical gradient background with unfixed height,

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

2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?

更新

update

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

Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?

推荐答案

有一种方法可以利用可用的背景属性：

There is a way to do it, you will want to take advantage of the available background properties:

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％ 。

If you want an unfixed height then replace 600px with 100%.

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

Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/

这篇关于如何设计具有不固定高度的页面的渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！