CSS以像素为单位设置多种颜色渐变？答案

【问题标题】：CSS Set multiple colors gradient in pixels?CSS以像素为单位设置多种颜色渐变？
【发布时间】：2019-12-30 10:22:14
【问题描述】：

如何在 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%);

【问题讨论】：

试试这个来创建任何类型的渐变...colorzilla.com/gradient-editor

标签： html css linear-gradients

【解决方案1】：

尝试如下：

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;
}

【讨论】：

【解决方案2】：

你来了

#grad1 {
    height: 200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(bottom, orange , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, orange, yellow, green, cyan, blue, violet); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, orange, yellow, green, cyan, blue, violet); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, orange , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
}

&lt;div id="grad1"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

我认为这正是问题所要求的 - 对尺寸进行了编辑以使效果在屏幕上清晰可见，诚然第一个示例非常花哨

.graded{
    background: linear-gradient(
      yellow 0%, 
      blue 10px, 
      red 20px, 
      green 30px, 
      pink 40px, 
      orange 50px,
      #f9f9f9 60px,
      #f9f9f9 100%
     );
}
.re-graded{
    background: linear-gradient(
    #e2e2e2 0%, 
    #e8e8e8 10px, 
    #efefef 20px,
    #f4f4f4 30px, 
    #f7f7f7 40px, 
    #f8f8f8 50px, 
    #f9f9f9 60px,
    #f9f9f9 100%
  )
}
div{
    width: 100%;
    height:10rem;
    border:1px solid black;
}

<div class='graded'>obvious</div>
<div class='re-graded'>subtle</div>

【讨论】：

【解决方案4】：

试试这个：

div {
  background: #466368;
  background: linear-gradient(to right, #e2e2e2 40px, #f8f8f8 50%, #e8e8e8 10%, #293f50 );
  border-radius: 6px;
  height: 120px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：