html - 您一次可以使用多少种线性渐变颜色？

Question

我每次都尝试使用 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 */
}

Answer 1

请尝试:

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

在 this fiddle 中进行了演示.如果它满足您的需要，那么您可以将百分比应用回其他行。我使用了您的号码并尝试匹配我认为您想要的尺寸。

如果您希望颜色之间的褪色更少，您可以插入与上一种颜色具有相同百分比的下一种颜色。参见 http://jsfiddle.net/t7yS7/1/举个例子。

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