CSS Gradient Color Blocks

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

Вы можете использовать: перед псевдоэлементом на корпусе, чтобы расположить красный блок вверху.

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