“大步骤”的CSS线性渐变
我正在尝试使用linear-gradient做背景，但是我希望这些步骤“更大”。
例如，不是逐个像素地改变像素，而是改变每N个像素。
是否有可能只用CSS来完成？
我对如何实现这一目标毫无头绪。 所以我做了这个SVG示例来模拟我想实现的内容：
http://codepen.io/Goodwine/pen/fqgdB
要做到这一点与CSS我需要手动插入每个，每个颜色停止，在这种情况下，我设置这个“颜色停止”s：
[{r: 0, g: 0, b: 0, a: 1, p: 0.00},
{r: 100, g: 100, b: 255, a: 1, p: 0.25},
{r: 255, g: 200, b: 100, a: 1, p: 0.5},
{r: 255, g: 200, b: 200, a: 1, p: 0.7},
{r: 100, g: 100, b: 100, a: 1, p: 0.9},
{r: 0, g: 0, b: 0, a: 1, p: 1}]
用CSS你可以得到非常相似的效果，但不完全一样
您可以拥有精确的像素高度linear-gradient s， 但它们无法自行删除或添加更多并保留该方案。 一个Javascript解决方案是唯一可以做到的东西。 CSS中的精确像素高度linear-gradient s只会显示顶部行，如果容器收缩并且容器的容量大于最大值，则会有额外的空间
确切的像素高度版本是此演示中屏幕的前50％
background-image: /* 22 sections used */
linear-gradient(#000000,#000000),
linear-gradient(#141433,#141433),
linear-gradient(#282866,#282866),
linear-gradient(#3C3C99,#3C3C99),
linear-gradient(#5050CC,#5050CC),
linear-gradient(#6464FF,#6464FF),
linear-gradient(#8378E0,#8378E0),
linear-gradient(#A28CC1,#A28CC1),
linear-gradient(#C1A0A2,#C1A0A2),
linear-gradient(#E0B483,#E0B483),
linear-gradient(#FFC864,#FFC864),
linear-gradient(#FFC878,#FFC878),
linear-gradient(#FFC88C,#FFC88C),
linear-gradient(#FFC8A0,#FFC8A0),
linear-gradient(#FFC8B4,#FFC8B4),
linear-gradient(#FFC8C8,#FFC8C8),
linear-gradient(#D8AFAF,#D8AFAF),
linear-gradient(#B19696,#B19696),
linear-gradient(#8A7D7D,#8A7D7D),
linear-gradient(#646464,#646464),
linear-gradient(#424242,#424242),
linear-gradient(#212121,#212121);
background-position:0px 0px, 0px 20px, 0px 40px, 0px 60px, 0px 80px, 0px 100px,
0px 120px, 0px 140px, 0px 160px, 0px 180px, 0px 200px, 0px 220px,
0px 240px, 0px 260px, 0px 280px, 0px 300px, 0px 320px, 0px 340px,
0px 360px, 0px 380px, 0px 400px, 0px 420px;
background-size:100% 20px;
更常见的背景，你可以给每个颜色％高度。 这不像像你想要的像素高度，但它继续显示所有的颜色，并在尺寸缩小/放大时填充容器。 这也仅限于最初列出的部分数量，不会动态添加到/从中删除
这可以在上面的演示的后半部分中看到
background-image: /* 21 sections used */
linear-gradient(#000000,#000000),
linear-gradient(#141433,#141433),
linear-gradient(#282866,#282866),
linear-gradient(#3C3C99,#3C3C99),
linear-gradient(#5050CC,#5050CC),
linear-gradient(#6464FF,#6464FF),
linear-gradient(#8378E0,#8378E0),
linear-gradient(#A28CC1,#A28CC1),
linear-gradient(#C1A0A2,#C1A0A2),
linear-gradient(#E0B483,#E0B483),
linear-gradient(#FFC864,#FFC864),
linear-gradient(#FFC88C,#FFC88C),
linear-gradient(#FFC8B4,#FFC8B4),
linear-gradient(#FFC8C8,#FFC8C8),
linear-gradient(#D8AFAF,#D8AFAF),
linear-gradient(#B19696,#B19696),
linear-gradient(#8A7D7D,#8A7D7D),
linear-gradient(#646464,#646464),
linear-gradient(#424242,#424242),
linear-gradient(#212121,#212121),
linear-gradient(#000000,#000000);
background-position:0% 0%, 0% 5%, 0% 10%, 0% 15%, 0% 20%, 0% 25%, 0% 30%, 0% 35%,
0% 40%, 0% 45%, 0% 50%, 0% 55%, 0% 60%, 0% 65%, 0% 70%,
0% 75%, 0% 80%, 0% 85%, 0% 90%, 0% 95%, 0% 100%;
background-size:100% 5%;
您的SVG技术处于最底层（开始时的屏幕下方）进行比较
简而言之， CSS无法获得与JS / SVG解决方案完全相同的结果，因为它无法计算窗口高度并根据该值设置元素的数量
但
CSS确实提供了一些非常酷的技巧（至少对我来说）
这些CSS技术也让我们只用一个元素和一些linear-gradient s就可以创建更复杂的东西（：
附注： grad()有一些未使用的参数
我希望我帮助！
链接地址: http://www.djcxy.com/p/77723.html