"big steps"的 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-gradient，但是它们不能自行删除或添加更多并保持计划。 Javascript 解决方案是唯一可以完全满足您的需求的解决方案。 CSS 中的精确像素高度 linear-gradient 只会在容器缩小时显示顶行，如果容器大于最大值，则会有额外的空间

精确的像素高度版本是 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 技术还让我们创建了 vastly more complex things只有一个元素和一些 linear-gradient (:

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

希望我有所帮助!