以增量重复背景

Question

我在使用一些 CSS 时遇到了困难，我想要一个黑条来显示每 X 个像素，但我希望它每次显示时增加大约 10 像素。

例如，第一个条出现在 100px，第二个出现在 110，第三个出现在 120。

到目前为止，我已经使用以下背景样式来实现第一部分（每 X 像素显示一个条形），但它也不完美：

  background: repeating-linear-gradient(white, white 1405px, black 210px,black 37.4cm)

那里有任何知道修复的 CSS 战士吗？

编辑

所以经过一些试验和错误，我成功地使用以下代码每 1405 像素放置一条线：

background: repeating-linear-gradient(white, white 1405px, black 1405px, black 1415px)

但问题仍然存在，元素在它们所属的位置，该行需要出现在每个元素之后（因此 + 10px 请求）。

这就是现在的样子：https://imgur.com/a/pokGCTk 但它并不总是 1 个元素，可能还有更多这样的元素：https://imgur.com/a/veaVK44

线仍然必须以设定的间隔（1405 像素）放置在元素后面，但每次都必须增加 10。 （所以是 1405 像素，然后是 1415 像素，然后是 1425 像素等）

Answer 1

很明显，使用简单的linear-gradient 我们不能有非常规模式。这是一个想法，使用一些变换和透视来模拟您的图案，其中黑线之间的距离会增长：

  body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  transform: rotateX(10deg);
  transform-origin: bottom;
}

.grad:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1000%;
  right: -1000%;
  background: repeating-linear-gradient(to bottom, #000 0, #000 10px, #fff 10px, #fff 50px);
  ]

<div class="grad">

</div>

或者您需要使用多个渐变并调整background-position。如果您想要多行，您可以使用 SASS 轻松生成：

body {
  margin: 0;
  perspective: 30px;
  perspective-origin: top;
  overflow: hidden;
}

.grad {
  height: 100vh;
  background-image: 
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000),
    linear-gradient(#000,#000);
  background-size:100% 10px ;
  background-repeat:no-repeat;
  background-position:
    0 0,
    0 50px,
    0 150px,
    0 300px;
}

<div class="grad">

</div>

这里是@Krypt1 提供的使用 SASS 生成上述内容的脚本：

https://www.sassmeister.com/gist/15bd039fdd0803ed79d12762ad6da28f

Answer 2

要使每个条带精确地工作 10 像素，您需要更改 repeating-linear-gradient 以从头到尾每 10 像素生成一次。然后你可以使用另一个渐变来隐藏第一个 100px 的白色，然后变为透明以显示条纹。 这是sn-p：

div {
  width: 100%;
  height: 200px;
  background: linear-gradient(white, white 100px, transparent 100px, transparent),
              repeating-linear-gradient(white, white 10px, black 10px, black 20px)
}

<div></div>

Answer 3

一种允许您从后面的元素显示背景样式的解决方案是使用位于 div 后面的伪元素，并在您的 repeating-lenear-gradient 中使用 rgba 来获得透明颜色。

body {
  background-color: #e0e0e0;
}

div {
  position: relative;
  height: 500px;
}

div::after {
  content: '';
  display: block;
  position: absolute;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px);
  z-index: -1;
  pointer-events: none;
}

<div></div>