Html 一次可以使用多少线性渐变颜色？

我试图使用7个渐变色作为我的背景，每次在第3个颜色之后，它似乎不起作用？有人能告诉我具体的情况吗。代码如下所示

body
{
    height: 2500px;
    background: -webkit-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                 /* For Safari */
    background: -o-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                     /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30,#000000 30%);                  /* For Firefox 3.6 to 15 */
    background: linear-gradient(#000000 2%,#FFFFFF 2%,#FFFFFF 30%,#2ecc71 30%,#2ecc71 70%,#3498db 70%,#3498db 30%,#000000 30%);                      /* Standard syntax */
}

请尝试：

body {
  height: 500px;
  background: linear-gradient(
    #000000 0%,
    #FFFFFF 4%,
    #FFFFFF 15%,
    #2ecc71 26%,
    #2ecc71 52%,
    #3498db 78%,
    #3498db 89%,
    #000000 100%);
}

这在中得到了演示。如果它满足您的需要，那么您可以将百分比应用回其他行。我用了你的号码，试着在尺寸上与我认为你想要的相匹配

如果希望颜色之间的淡入度较小，可以插入与上一种颜色百分比相同的下一种颜色。有关示例，请参见

---

@xpy给了我解决这个问题的线索。

@jasonaler-nah，为什么？我想这就是问题所在？可能是因为它们相互重叠other@xpy好的，我会调查一下的，谢谢，%到底是什么意思？我假设这个问题的公式是我的颜色数，7除以100。对吗？是的，我用的是大小的百分比。百分比是从原点到颜色的距离。以相同的百分比将两种颜色相邻放置会导致颜色的突然变化。以不同的百分比放置两种颜色可以使它们混合。而不是7除以100，我试图考虑你的2%，2%，30%，30%，70%，70%，30%，30%来猜测你想要的颜色如何出现。或者我可以把你的最后一个数字改成100%，第二个改成70%到100%之间的值。我明白你的意思，但我仍然有大小的问题。你希望渐变看起来怎么样？具有显示每个颜色停止在渐变中所做操作的注释。我把它缩小到500px只是为了让它更适合我的屏幕。如果我想做法国国旗，我会做以下事情：