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

Question

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

设置特定的停止部分

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

Answer 1

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

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

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

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

我还提供了一个容器 div 来容纳您的其余内容，基本上以与正文通常相同的方式运行。

Answer 2

使用 gradient generator

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 3

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

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

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

How do I set colors for specific sections of my background?

html

css

background