CSS中的渐变颜色（带百分比）
发布于2021-05-12 08:10 阅读(276) 评论(0) 点赞(5) 收藏(2)
我只有CSS的基本知识。我正在尝试按照以下准则为我的ITEM之一提供渐变颜色，并且渐变应该是垂直的。
我尝试了以下方法，但是只有第一种颜色遍及整个区域。我不明白那30％和50％。如何实现呢？
.myheader {
background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);
}
解决方案
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％）之间的百分比，它们可能是颜色提示（也称为颜色插值提示）。从该新规范
在两个色标之间可以有一个颜色插值提示，该提示指定应如何在它们之间的空间中插值两侧的两个色标的颜色（默认情况下，它们是线性插值）。任何两个给定的色标之间最多只能有一个颜色插值提示。使用多于此将使该功能无效。
例子：
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;
}所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/101849/2fa44c1c19533cf525f7/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力