使用硬停止水平添加多种颜色背景颜色的CSS

Question

问题

如何修改我的CSS以向背景添加5种不同的颜色？

我不希望他们互相褪色，我想要坚持不懈。

代码

我已经开始了这个codepen demo。但这是我的基本代码：

HTML

<div class="header-trim"></div>

CSS

background: linear-gradient(to right, #946f20 20%, #041b2c 20%, #00adf2 20%, #30bc9d 20%, #7f469f 20%);

Answer 1

你必须在线性背景中列出每种颜色两次，例如＆＃34;从0％到20％＆＃34;然后＆＃34;从20％到40％＆＃34;等等，百分比值总是指整个距离的百分比，所以它是：

background: linear-gradient(to right, #946f20 0%, #946f20 20%, #041b2c 20%, #041b2c 40%, #00adf2 40%, #00adf2 60%, #30bc9d 60%, #30bc9d 80%, #7f469f 80%, #7f469f 100%);

结果如下：http://codepen.io/anon/pen/BWNbQG

Answer 2

添加另一种颜色结束的颜色值。您基本上是添加颜色开始和停止的点。如果起点和终点不相同，您将获得过渡效果。

<强> CSS

.header-trim {
  background: linear-gradient(to right, #946f20 20%, #041b2c 20%, #041b2c 40%, #00adf2 40%, #00adf2 40%, #00adf2 60%, #30bc9d 60%, #30bc9d 80%,#7f469f 80%, #7f469f 100%);}

codepen