html - CSS 中的渐变颜色百分比

Question

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



我尝试了以下，但只有第一种颜色遍布整个地区。我不明白 30% 和 50%。如何实现这一目标？

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

Answer 1

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

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