如何在 y 轴坐标 1、2、3、4、5 和 6 上从上到下绘制出 6 种不同的颜色,这些颜色各占 1 px,第 7 种颜色占其余的股利?我试过这个但它不起作用:
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/