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给了我解决这个问题的线索。

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

1 个答案: