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

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

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

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

3 个答案: