CSS中渐变颜色的百分比

Question

我只有CSS的基本知识。我正在尝试按照以下准则为我的ITEM之一提供渐变颜色，并且渐变应该是垂直的。

我尝试了以下方法，但是只有第一种颜色遍及整个区域。我不明白那30％和50％。如何实现呢？

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

Answer 1

 .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 2

您需要按升序指定点。只需反转您拥有的值即可（您并不需要紫色，但可以根据需要添加它）：

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

Answer 3

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％）之间的百分比，它们可能是颜色提示（也称为颜色插值提示）。来自the new specification

  

两个色标之间可以有一个颜色插值提示，该提示指定应如何在两个色标之间的空间中插入两侧的两个色标的颜色（默认情况下，它们是线性插值的） ）。任何两个给定的色标之间最多只能有一个颜色插值提示。使用更多的代码会使该功能无效。

示例：

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 4

这是一个示例，请使用您的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%
  }

Answer 5

百分比值必须按顺序递增。 （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/

对于您的渐变色，您可以只使用蓝色和红色。