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

Question

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

关于如何使用 CSS3 完成这项工作有什么想法吗？

Answer 1

使用 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;
}