CSS渐变色块

Question

我想用两种不同的颜色设置页面的主体。前25％将是深红色，剩下的75％将是白色。

我使用背景图像来复制25％的深红色部分。所以下图是它的样子。

但我想知道我是否使用CSS渐变来复制它？由于您可以非常仔细地查看或应用它，因此代码不会导致颜色之间的清晰分离。那里有一个小位的渐变位。

这是我的CSS。

body {
    background: rgb(125, 12, 14);
    background: -moz-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -webkit-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -o-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -ms-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: linear-gradient(180deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
}

重申一下，有没有办法可以编写CSS代码，以便使用CSS渐变清晰地分割两个颜色块？其他CSS方法也很受欢迎。

Answer 1

您可以在主体上使用：before伪元素将红色块放在顶部。

＆＃13;

＆＃13;

body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 75%;
  background-color: rgb(106, 0, 0);
  }
  

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的图片有点不清楚，但您可以复制色标。

＆＃13;

＆＃13;

html {
  min-height: 100%;
}
body {
  height: 100%;
  background: linear-gradient(rgb(125, 12, 14) 29%, rgb(255, 255, 255) 29%, rgb(255, 255, 255));
  background-repeat: no-repeat;
}

＆＃13;

＆＃13;

＆＃13;