CSS带“的线性渐变”；“大步走”；

我正在尝试使用

线性渐变来制作背景，但是我希望步骤“更大”。

例如，不是逐像素改变，而是每N个像素改变一次

是否可以只使用CSS来实现

我不知道如何才能做到这一点。因此，我制作了这个SVG示例来模拟我想要实现的目标：


要使用CSS，我需要手动插入每个颜色挡块，在这种情况下，我要设置“颜色挡块”：

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

您可以具有精确的像素高度
线性梯度，但是它们不能删除自身或添加更多内容并保留方案。Javascript解决方案是唯一可以完全实现现有功能的解决方案。CSS中的精确像素高度
linear gradient
s仅在容器收缩时显示顶行，如果容器大于最大值，则会有额外的空间

精确的像素高度版本是中屏幕的前50%

更常见的是，对于背景，可以为每种颜色指定%高度。它没有你想要的像素高度，但是当大小缩小/放大时，它会继续显示所有颜色并填充容器。这也仅限于最初列出的节的数量，并且不会动态添加到/从中删除

这一点可以在本报告的下半年看到

您的SVG技术位于最底部（在开始时的屏幕下方）进行比较

简而言之，CSS无法获得与JS/SVG解决方案完全相同的结果，因为它无法计算窗口高度并基于此设置元素数

但是

CSS确实提供了一些非常酷的技巧（至少对我来说）

这些CSS技术还允许我们仅使用一个元素和一些
线性渐变
s（：

旁注：
grad（）
有一些未使用的参数

我希望我能帮上忙！
太糟糕了，CSS不可能做到这一点，比如
线性渐变（从，到，大小）
，我喜欢您使用%s:oSounds定位矩形的方式，这对于生成矩形的小型JS库来说是个好主意。可能有。@YuvalA。这就是答案。创建这样的东西非常容易。在某些情况下，您可以使用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}]

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