代码之家 › 专栏 › 技术社区 › Rick van Lieshout

以增量重复背景

linear-gradients background sass css3 css

Rick van Lieshout · 技术社区 · 8 年前

我正在努力使用一些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 但它并不总是一个元素,可能更像这样: https://imgur.com/a/veaVK44

该行仍必须以设定的间隔(1405像素)放置在元素后面,但每次必须增加10。(所以1405像素,然后1415像素,然后1425像素等)

3 回复 | 直到 8 年前

Temani Afif 8 年前

很明显, 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

Krypt1 8 年前

要使条纹每个正好工作10像素,您需要更改 repeating-linear-gradient 从开始到结束每10px生成一次。然后你可以使用另一个渐变来隐藏第一个100像素的白色,然后改为透明以显示条纹。这是一个片段:

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>

Scoots 8 年前

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