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>

这是一个 fiddle :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%);