用 2 种颜色高度填充背景颜色 [重复]

【问题标题】：Fill background-color with 2 colors height-wise [duplicate]用 2 种颜色高度填充背景颜色 [重复]
【发布时间】：2021-05-24 01:49:13
【问题描述】：

我正在寻找一种将 HTML 文档的背景颜色设置为 2 种颜色而不是一种颜色的方法。这种问题以前也有人问过，但是我想设置两种颜色height-wise（垂直分割）而不是width-wise。

【问题讨论】：

标签： css background-color

【解决方案1】：

我不确定你找到了什么，但你可以使用 linear-gradient 来解决这个问题：

body {
height: 100vh;
background: linear-gradient(0deg, rgba(204,0,0,1) 50%, rgba(0,212,255,1) 50%); 
}

<body>
</body>

只需将角度设置为0 deg

【讨论】：

【解决方案2】：

你可以像这样定义css

#grad1 {
  height: 100%;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(orange, white, green);
}

并在你的 div 中使用这个 css

<div id="grad1"></div>

注意：根据需要更改颜色代码和高度

【讨论】：

【解决方案3】：

你可以这样做。

<div>
        <div className='first'>
          hello
        </div>
        <div className='second'>
          hi
        </div>
      </div>

CSS：

.first{
  height: calc(50vh);
  background: blue;
}
.second{
  height: calc(50vh);
    background: red;
}

【讨论】：