Можно ли смешивать градиенты с сплошными цветами?

Question

Я читал про gradients и задавался вопросом, возможно ли, для одного заданного div, чтобы смешать твердые и градиентные цвета как CSS его background.

Я думал об этом в контексте прутка, который представлял бы альтернанс дня и ночи: white за день (50% от div ширины), затем градиент от white к black (= сумерек, 20 % от ширины div), а затем black (30% от ширины div). Процентное значение - это просто указать контекст, будут вычислены фактические длины.

Документация для градиентов, по-видимому, подразумевает, что микс невозможен, то есть возможность установить несколько остановок, но каждый из них затухает (поэтому нет сплошных цветов).

Answer 1

Вы можете использовать следующее решение с помощью linear-gradient:

body { 
 
    background:grey; 
 
} 
 
div { 
 
    background: linear-gradient(to right, 
 
    white 0%, white 50%, 
 
    white 50%, black 70%, 
 
    black 70%, black 100%); 
 
    height:200px; 
 
    width:100%; 
 
}

<div></div>

Answer 2

Ответ: Да вы можете, но есть немного расчета необходимы, если вы хотите разделить несколько разделов:

background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(127,127,127,1) 70%,rgba(0,0,0,1) 100%); /* 

Если вы хотите разделить вторую секцию 20/30, вам необходимо знать, RGB между черным и белым, что достаточно просто. Другие цвета были бы более сложными