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

如果内部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/

Answer 2

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

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%);

操纵重复线性渐变

2 个答案: