如何为背景的特定部分设置颜色？

Question

我目前正在尝试为页面背景的特定部分设置背景颜色。 想法是使页面顶部的大约1/5或1/4为一种颜色，而其余的整个底部为单独的颜色。 我已经考虑过使用渐变来做到这一点，但是我不知道如何通过CSS3设置特定的停止部分。

关于如何使用CSS3完成此工作的任何想法？

Answer 1

使用渐变发生器

 html, body { min-height: 100%; } body { background: #fb83fa; background: -moz-linear-gradient(top, #fb83fa 25%, #7ceacd 25%, #7ceacd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,#fb83fa), color-stop(25%,#7ceacd), color-stop(100%,#7ceacd)); background: -webkit-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); background: -o-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); background: -ms-linear-gradient(top, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); background: linear-gradient(to bottom, #fb83fa 25%,#7ceacd 25%,#7ceacd 100%); } 

或者，您可以放弃渐变并使用伪元素...

 html, body { min-height: 100%; } body { background: #7CEACD; } body:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 25%; background: #fb83fa; } 

Answer 2

您可以使用单独的div表示不同的部分，然后使用height：20vh表示当前视图高度的20％。

.top {
    background-color: blue;
    height: 20vh;
}

.bottom {
    background-color: red;
    height: 80vh;
}

http://jsfiddle.net/goerfjyf/1/

我还包括了一个容器div，用于容纳其余内容，基本上以与主体通常相同的方式起作用。

Answer 3

无需弄清楚停止点，您可以使用仅包含两种相同颜色的渐变，并使用background-size设置其高度。

html,body{
    height:100%;
}
body{
    background:linear-gradient(0deg,#f00,#f00) no-repeat;
    background-size:100% 25%;
}