Question

我正在尝试使用linear-gradient做背景，但我希望步骤“更大”。
例如，不是逐个像素地改变，而是每隔N个像素改变一次。

是否可以仅使用CSS进行此操作？

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

要使用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技术还让我们只用一个元素和一些linear-gradient来创建vastly more complex things（：

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

我希望我帮忙！

带有“大步”的CSS线性渐变

1 个答案: