带有"大步"的CSS线性渐变

Question

我正在尝试使用背景linear-gradient,但我希望步骤"更大".
例如,不是逐个像素地改变,而是改变每N个像素.

是否可以只用CSS做到这一点？

我对如何实现这一目标毫无头绪.所以我创建了这个SVG示例来模拟我想要实现的目标:

http://codepen.io/Goodwine/pen/fqgdB

要使用CSS,我需要手动插入每个颜色停止,在这种情况下我设置这个"颜色停止":

[{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}]

Answer 1

使用CSS可以得到非常相似的效果，但不完全相同

您可以具有精确的pixel-height linear-gradient，但是它们不能删除自己或添加更多内容并保留该方案。Javascript解决方案是唯一可以完全完成您所拥有的功能的方法。linear-gradient如果容器缩小，则CSS中的精确pixel- h 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-gradientS（：

旁注：grad()具有一些未使用的参数

希望我能帮上忙！