CSS中的渐变颜色与百分比答案

【问题标题】：Gradient color in CSS with percentageCSS中的渐变颜色与百分比
【发布时间】：2019-05-29 09:14:56
【问题描述】：

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

我尝试了下面的方法，但整个地区只有第一种颜色。我不明白 30% 和 50%。如何做到这一点？

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

【问题讨论】：

不确定你从哪里得到这些数字，但background: linear-gradient(to bottom, blue, red); 应该这样做。

标签： html css linear-gradients

【解决方案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%）之间的百分比，它们可能是颜色提示（也称为颜色插值提示）。来自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;
}

【讨论】：

很好的解释！非常感谢您消除了我对这些神秘百分比的疑虑 :)
@ArunPalanisamy 欢迎 ;) 作为旁注，您从哪里获得创建渐变的工具？我想尝试一下，通过设置不同的值来确保我说的是正确的……颜色提示部分可能比这更棘手
哎呀我不知道 :( 。我公司的设计文档中提到过。我截取了屏幕截图并在此处给出。我只是按照这些文档来相应地设计我的应用程序。
@ArunPalanisamy 好的，所以只有公司知道这些额外百分比的真正含义。它们很有可能是颜色提示，但可能不是

【解决方案2】：

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

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

【讨论】：

谢谢！我也想知道图中提到的那30%和50%？这是我需要担心还是不需要的事情？

【解决方案3】：

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

&lt;div class="myheader"&gt;&lt;/div&gt;

to bottom 方向告诉您渐变是从上到下。所以如果第一种颜色是 85%，这意味着它下降到容器高度的 85%。

通过反转百分比（85% -> 15%），可以达到你想要的结果。

【讨论】：

成功了！谢谢。你知道图片中提到的那 30% 和 50% 吗？

【解决方案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%
  }

【讨论】：

【解决方案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/

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

【讨论】：