Цвет градиента в CSS с процентами

Question

У меня есть только базовые знания по CSS.Я пытаюсь дать цвет градиента для одного из моих пунктов согласно приведенным ниже рекомендациям, и градиент должен быть вертикальным.

Я попробовал следующее,но только первый цвет появляется по всему региону.Я не понимаю, что 30% и 50%.Как этого добиться?

 .myheader {  
  background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);       
  }

Answer 1

Eveyrone предлагает решение to bottom, но тривиальным решением является учет to top и сохранение процентных значений, которые вы используете на рисунке:

linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);

пример:

body {
  background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
  margin: 0;
  height: 100vh;
}

Что касается процентного соотношения (от 50% до 30%), они являются , вероятно, подсказками цвета (также называемыми подсказками интерполяции цвета). С новая спецификация

Между двумя цветовыми остановками может быть подсказка интерполяции цвета , которая определяет, как цвета двух цветовых остановок с обеих сторон должны интерполироваться в пространстве между ними (по умолчанию они интерполируются линейно) , Между любыми двумя заданными цветовыми остановками может быть только одна подсказка цветовой интерполяции; использование более этого делает функцию недействительной.

пример:

body {
  background: 
   /* First gradient with hints*/
   linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
   /* Second gradient with hints*/
   linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
  
  
  background-repeat:no-repeat;
  margin: 0;
  height: 100vh;
}

Answer 2

 .myheader {
  width: 100px;
  height: 100px;
  background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);       
 }

<div class="myheader"></div>

Направление to bottom говорит о том, что ваш градиент идет сверху вниз.Таким образом, если первый цвет равен 85%, это означает, что он уменьшается до 85% высоты контейнера.

Инвертируя процентное соотношение (85% -> 15%), вы можете добитьсяхотят.

Answer 3

Вам необходимо указать точки в порядке возрастания.Просто инвертируйте значения, которые у вас есть (вам на самом деле не нужен фиолетовый, но вы можете добавить его при желании):

body {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}

Answer 4

Значения процентов должны возрастать по порядку. (https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;

.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}

https://jsfiddle.net/qa1kLmfc/3/

Для вашего градиента вы, вероятно, можете использовать только синий и красный.

Answer 5

Это пример, используйте ваши цвета RGBA.

.myheader {  
  background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
  }