在一个元素上堆叠两个线性渐变背景，但颜色和高度不同

Question

我对尝试花哨的 CSS 效果非常陌生，但我正在追求一些非常特别和棘手的东西，但我无法完成。

这是我正在寻找的效果：

这是<div> 元素的背景效果。这只是（或不只是对我而言）两个堆叠的linear-gradient 背景，它们创建了具有不同填充颜色的等距、垂直细条纹。顶部背景是固定的 700 像素高，底部应该是流动的，即重复以填充剩余空间。完成的规则​​必须是跨浏览器的，即正确的前缀等。

这可能是不可能的，但我读过一些关于人们使用多个背景/背景堆叠的信息，所以我认为这就是完成这项工作所需要的。

我在 Envato Market 模板上看到了这种效果，但他们使用了 10 个空的 div 元素来完成这项工作（一个用于第一种颜色，一个用于第二种颜色，八个用于垂直部分以及许多层上的许多绝对定位元素)，我认为这不是一个好主意，因此想要一个简单的 CSS 版本。

这是我在被卡住之前已经走了多远：

background: linear-gradient(90deg, #E0E0E0 0.5%, transparent 0.5%) 0.5px 0, #EBF1F6;
background-size: calc((100% / 8) + 0.2px) 0.5px;
background-position: -1px;

我做了半解释：

• linear-gradient 部分由带有#EBF1F6 填充和#E0E0E0 细条纹的 90 度渐变组成。
• 我使用 0.5% 使细条纹成为理想的厚度。
• 我使用calc((100% / 8) + 0.2px) 创建了 8 个等距的块，并使用0.2px 使在浏览器右边缘创建的细条纹不可见（0.2px * 8 = 将图案向右移动 1px） .
• 我同样使用background-size: -1px 去除浏览器左边缘最左侧的细条纹。

到目前为止是这样的：

https://codepen.io/PaparazzoKid/pen/NWKOQZr

缺少什么：

• 我没有成功设置linear-gradient 的高度，即700px。
• 因为我没有设置第一个 linear-gradient 的高度，我显然没有尝试将另一个 linear-gradient 堆叠到这个具有流体高度和不同填充颜色的元素。
• 它不是跨浏览器，我很确定 linear-gradient 不适用于所有浏览器，因为有些需要前缀，有些使用 gradient 而不是 linear-gradient。

如果有人能分享他们的知识并帮助我完成这个 CSS 效果，我将永远感激不尽。

Answer 1

您可以尝试如下：

我使用了80px 而不是700px，所以我们可以在减少的 sn-p 中看到结果。我还考虑了不同数量的垂直细条纹，以表明您可以轻松地为每个部分更改它们：

body {
  margin:0;
  height:100vh;
  background:
    linear-gradient(to right,
      blue calc(100% - 2px), red calc(100% - 2px) 100%)      left top
      /calc((100% + 2px)/4)  80px,
    linear-gradient(to right,
      orange calc(100% - 2px), purple calc(100% - 2px) 100%) left bottom
      /calc((100% + 2px)/6) calc(100% - 80px);
   background-repeat:repeat-x;
}

如果你想要一个渐变而不是垂直线之间的纯色，你可以考虑更多的渐变：

body {
  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - 2px), red calc(100% - 2px) 100%)      left top
      /calc((100% + 2px)/4)  80px,
    linear-gradient(60deg,blue,lightblue) left top/100% 80px,   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - 2px), purple calc(100% - 2px) 100%)  left bottom
      /calc((100% + 2px)/6) calc(100% - 80px), 
    linear-gradient(160deg,orange,green) left bottom/100% calc(100% - 80px);
   background-repeat:repeat-x;
}

使用一些 CSS 变量来轻松控制值：

body {
  --nt:4;   /* Number of vertical lines on the top*/
  --lt:2px; /* Thickness*/
  
  --nb:6;   /* Number of vertical lines on the bottom*/
  --lb:4px; /* Thickness*/
  
  --h:100px; /*height of the top part*/

  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - var(--lt)), red calc(100% - var(--lt)) 100%)      left top
      /calc((100% + var(--lt))/var(--nt))  var(--h),
    linear-gradient(60deg,blue,lightblue) top/100% var(--h),   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - var(--lb)), purple calc(100% - var(--lb)) 100%)  left bottom
      /calc((100% + var(--lb))/var(--nb)) calc(100% - var(--h)), 
    linear-gradient(160deg,orange,green) bottom/100% calc(100% - var(--h));
   background-repeat:repeat-x;
}

另请注意，在纯色的情况下，您不需要定义底部的高度，因为它会与顶部重叠

body {
  --nt:4;   /* Number of vertical lines on the top*/
  --lt:2px; /* Thickness*/
  
  --nb:6;   /* Number of vertical lines on the bottom*/
  --lb:4px; /* Thickness*/
  
  --h:100px; /*height of the top part*/

  margin:0;
  height:100vh;
  background:
   /* Top layer*/
    linear-gradient(to right,
      transparent calc(100% - var(--lt)), red calc(100% - var(--lt)) 100%)      left top
      /calc((100% + var(--lt))/var(--nt))  var(--h),
    linear-gradient(60deg,blue,lightblue) top/100% var(--h),   
      
   /* Bottom layer*/   
    linear-gradient(to right,
      transparent calc(100% - var(--lb)), purple calc(100% - var(--lb)) 100%)  left bottom
      /calc((100% + var(--lb))/var(--nb)) 100%, 
    linear-gradient(160deg,orange,green) ;
   background-repeat:repeat-x;
}