CSS以像素為單位設置多種顏色漸變？

Question

如何在 y 軸坐標 1、2、3、4、5 和 6 上從上到下繪制 6 種不同的顏色，這些顏色各占 1 像素，第 7 種顏色占其余部分div？ 我試過這個，但它不起作用：

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

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

Answer 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) */ }

 <div id="grad1"></div>

Answer 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>

Answer 4

嘗試這個：

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

 <div></div>