CSS中的渐变颜色与百分比

Question

我对CSS只有基本的了解。我正在尝试按照以下准则为我的一件物品提供渐变颜色，并且渐变应该是垂直的。

我尝试了下面的颜色，但只有第一种颜色出现在整个区域。我不明白30%和50%。如何实现这一目标？

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

Answer 1

每个人都给出了to bottom解决方案，但简单的解决方案是考虑to top并保留您在图片中使用的百分比值：

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

例子：

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

对于（50％和30％）之间的百分比，它们可能是颜色提示（也称为颜色插值提示）。从新规范来看

在两个颜色停止点之间可以有一个颜色插值提示，它指定两侧两个颜色停止点的颜色应如何插值到它们之间的空间中（默认情况下，它们线性插值）。任意两个给定颜色停止点之间最多只能有一个颜色插值提示；使用超过这个数量会使该功能无效。

例子：

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