html - CSS在像素中设置多个颜色渐变？

如何在y轴坐标1、2、3、4、5和6上从上到下绘制6种不同的颜色，这些颜色分别占1 px，而第7种颜色占其余的颜色div？我已经尝试过了，但是没有用：

background-image: linear-gradient(to bottom, #e2e2e2 0%, #e8e8e8 2px, #efefef 3px, #f4f4f4 4px, #f7f7f7 5px, #f8f8f8 6px, #f9f9f9 100%);

最佳答案

尝试如下：

html {
 min-height:100%;
 background-image:
  linear-gradient(to bottom,
    orange  0 10px,
    red     0 20px,
    purple  0 30px,
    green   0 40px,
    #f7f7f7 0 50px,
    blue    0 60px,
    yellow 0);
}

或这样，如果您想要淡入淡出的过渡

html {
 min-height:100%;
 background-image:
  linear-gradient(to bottom,
    orange  10px,
    red     20px,
    purple  30px,
    green   40px,
    #f7f7f7 50px,
    blue    60px,
    yellow  0);
}

具有多个渐变的另一个想法：

html {
 min-height:100%;
 background:
  linear-gradient(to bottom,
    orange  ,
    red     ,
    purple  ,
    green   ,
    #f7f7f7 ,
    blue    ) top/100% 25% no-repeat, /* 25% = height */
   yellow;
}

关于html - CSS在像素中设置多个颜色渐变？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59529214/