CSS 渐变色块

Question

我想用两种不同的颜色设置我的页面正文。前 25% 将是深红色，其余 75% 将是白色。

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

但我想知道我是否使用 CSS 渐变来复制它？当您仔细观察或应用它时，代码不会导致颜色之间的清晰分离。那里有一点 little 的渐变。

这是我的 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 伪元素在顶部放置一个红色块。

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

Answer 2

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

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

CSS 渐变色块

CSS Gradient Color Blocks

html

css

linear-gradients