CSS 中的渐变颜色百分比

Question

我对CSS只有基本的了解。我正在尝试按照以下指南为我的其中一项项目提供渐变颜色，并且渐变应该是垂直的。

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

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

Answer 1

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

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

Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.

示例：

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;
}

CSS 中的渐变颜色百分比

Gradient color in CSS with percentage

html

css

linear-gradients