【问题标题】：CSS to add multiple color background colors horizontally with hard stops [duplicate]CSS以硬停止水平添加多种颜色背景颜色[重复]
【发布时间】：2017-02-27 20:33:04
【问题描述】：

问题

如何修改我的 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%);

【问题讨论】：

这样吗？ codepen.io/mcoker/pen/PpqLGd

标签： html css

【解决方案1】：

您必须在线性背景中列出每种颜色两次，例如“从 0% 到 20%”，然后是“从 20% 到 40%”等，百分比值始终表示整个距离的百分比，所以它是：

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

【讨论】：

这行得通，现在我必须研究更多关于 IE 的信息。到目前为止发现这个stackoverflow.com/questions/10924632/…
那是 2012 年的...

【解决方案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

【讨论】：

这确实符合我的要求。但颜色相遇的地方似乎有点模糊。