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

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

此处由https://stackoverflow.com/a/46697826/9423231提供的脚本使用SASS生成以上内容：

@Krypt1

Answer 2

对于每个条带工作正好10px，您需要更改repeating-linear-gradient以从开始到结束每10px生成它们。然后您可以使用另一个渐变来隐藏前白色100px，然后更改为透明以显示条纹。这是片段：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 3

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

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>

用增量重复背景

3 个答案: