带有“大步骤”的 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 你可以得到非常相似的效果，但不完全相同

您可以拥有精确的像素高度linear-gradients，但他们无法自行删除或添加更多内容并保留该方案。 Javascript 解决方案是唯一可以完全满足您的需求的解决方案。 CSS 中的精确像素高度linear-gradients 只会在容器缩小时显示顶行，如果容器大于最大值，则会有额外的空间

确切的像素高度版本是this demo中屏幕的前 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;

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

这在the demo above的后半部分可以看到

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 创建 vastly more complex things（：

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

希望我能帮上忙！