以增量重复背景

Question

我遇到了一点 CSS，我想要一个黑条来显示每 X 个像素，但我希望它每次显示时增加大约 10px。

例如，第一个条显示在 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

要使条纹每个正好 10 像素，您需要更改 repeating-linear-gradient 以从头到尾每 10 像素生成一次条纹。然后你可以使用另一个渐变先用白色隐藏 100px，然后更改为透明以显示条纹。这是片段：

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 2

一种允许您从后面的元素显示背景样式的解决方案是使用位于 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>

Answer 3

很明显，使用简单的 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

以增量重复背景

Repeating background with an increment

css

background

sass

linear-gradients