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

Question

我对尝试花哨的 CSS 效果还很陌生，但我正在寻找一些非常特别和棘手的东西，我很难完成。

这就是我要找的效果：

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

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

我在 Envato Market 模板上看到了这种效果，但他们使用了 10 个空的 div 元素来完成这项工作（一个用于第一种颜色，一个用于第二种颜色，8 个用于垂直部分，许多是绝对定位的多个层上的元素），我认为这不是一个好主意，因此想要一个简单的 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 个均等 spaced 块和 0.2px 以便在浏览器的右边缘创建的细条纹不可见 (0.2 px * 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 因此我们可以在简化的代码段中看到结果。我还考虑了不同数量的垂直细条纹，以表明您可以轻松地为每个部分更改它们：

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

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

Stacking of two linear-gradient backgrounds on one element but with different colours and heights

css

background

linear-gradients