Question

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

Answer 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

Answer 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>

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

Answer 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;
}

用 2 种颜色高度填充背景颜色

3 个答案: