如何使用CSS创建垂直线作为背景均匀隔开？

Question

我一直在寻找一种使用css将垂直线条添加为div背景的方法，但是我在任何地方都找不到！

理想情况下，我想要一个100vh的div，它有5条垂直的灰色线条作为背景均匀分布。然后，我希望能够覆盖信息-希望可以通过背景图片完成此操作？

这里是我发现的东西，但努力操作

.lines {
  min-height: 100vh;
  background-image: linear-gradient(90deg, transparent, transparent calc(100% / 3), black calc((100% / 3) + 1px), transparent calc((100% / 3) + 1px)), linear-gradient(90deg, transparent, transparent calc((100% / 3 * 2) - 1px), black calc(100% / 3 * 2), transparent calc(100% / 3 * 2));
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div class="lines">
</div>

这里有我从中获得的代码笔的链接。https://codepen.io/redmile/pen/XgZeOX

Answer 1

尝试使用以下5种背景（每行一个）

html {
  min-height:100%;
  background:
    linear-gradient(blue,blue) calc(1*100%/6),
    linear-gradient(blue,blue) calc(2*100%/6),
    linear-gradient(blue,blue) calc(3*100%/6),
    linear-gradient(blue,blue) calc(4*100%/6),
    linear-gradient(blue,blue) calc(5*100%/6);
  background-size:5px 100%; /* Control the width here*/
  background-repeat:no-repeat;
}

使用较少代码的另一个想法：

html {
  min-height:100%;
  background:
    linear-gradient(to right,transparent calc(100% - 5px),blue calc(100% - 5px) 100%)
    left/calc((100% - 5*5px)/6 + 5px) 100%;
}

另一个：

html {
  min-height:100%;
  background:
    repeating-linear-gradient(to right,
     transparent 0 calc((100% - 5*5px)/6),
     blue calc((100% - 5*5px)/6) calc((100% - 5*5px)/6 + 5px));
}

并且使用CSS变量可以轻松控制所有内容：

html {
  --w:3px; /* Thiclness of the line */
  --n:5;   /* number of line */
  
  --c:calc((100% - var(--n)*var(--w))/(var(--n) + 1));
  
  min-height:100%;
  background:
    repeating-linear-gradient(to right,
     transparent 0 var(--c),
     blue var(--c) calc(var(--c) + var(--w)) );
}

相关问题以获取有关计算的更多详细信息：Using percentage values with background-position on a linear gradient