css - 操纵重复线性渐变

Question

我想重新创建类似于优步品牌网站的线条图案：https ://brand.uber.com/ - 特别是您可以在后台看到的重复线条：http: //prntscr.com/etius6

为此，我想到了使用带有 css 的重复线性渐变。

.container {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 16.666666667%);
    min-height: 5000px;
     max-width:904px;
  margin:0 auto;
}

<div class="container">
  
</div>

这是一个小提琴：https ://jsfiddle.net/jz7ag7L1/

它有效，但我想稍微调整一下。基本上我想消除第一个条，但是我尝试的任何方法都只会使渐变消失或者变得奇怪地变薄，总是将条留在它们现在所在的位置..background-position也没有效果。

任何帮助都会很棒，谢谢

Answer 1

我使用双渐变背景图像解决了，用两个渐变中的第一个隐藏第一行

background-image: linear-gradient(to right, white, white 1px, transparent 0, transparent 100%),repeating-linear-gradient(90deg, #d8d8d8, #d8d8d8 1px, white 0, white 16.66667%);

Answer 2

如果内部 div 不是问题，则使用 overflow:hidden 将左灰线隐藏在外部 div 后面：

.container .inner {
  background-image: repeating-linear-gradient(90deg,  #d8d8d8, #d8d8d8 1px,  white 0, white 20%);
  min-height: 5000px;
  margin-left: -1px;
}
.container {
  max-width: 904px;
  margin:0 auto;
  overflow: hidden;
}

<div class="container"><div class="inner"></div></div>

https://jsfiddle.net/jz7ag7L1/1/