Question

试图在“分成两部分”的页面上获得背景；相对两侧有两种颜色，请使用线性渐变进行此操作，但是如果某些element（div）高度较大的背景色重复

<body>
 <div class="blocktest">
  test
 </div>
</body>

css：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height:100vh;
}
.blocktest {
  height:1500px;
}

demo

我想要50％的页面颜色color1，其余的页面颜色是color2

Answer 1

使用min-height代替height：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  min-height: 100vh;
}

.blocktest {
  height: 1500px;
}

<div class="blocktest">
  test
</div>

实际上，您的body仅限于100vh和background is getting propagated to root element才能覆盖整个屏幕。因此，您会看到2个背景，其中一个是根元素，在其上方是一个身体。

如果您保留height:100vh并为html添加其他背景，您会注意到：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
}

.blocktest {
  height: 1500px;
}
html {
 background:pink;
}

<div class="blocktest">
  test
</div>

如果您只想覆盖背景的100vh，请将html背景设置为白色或禁用重复：

body {
  background-image: linear-gradient(#000 50%, #ffffff 0%);
  height: 100vh;
  /* Or background-repeat:no-repeat */
  margin:0;
}

.blocktest {
  height: 1500px;
}
html {
 background:white;
}

<div class="blocktest">
  test
</div>

另一个相关问题：How to remove the stripes that appears when using linear gradient property

背景色，它是窗口CSS高度的50％

1 个答案: