Повторение фона с шагом

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 пикселей), но этоs увеличить на 10 каждый раз.(то есть 1405 пикселей, затем после 1415 пикселей, затем после 1425 пикселей и т. д.)

Answer 1

Решение, которое позволяет вам показать стилевое оформление фона позади элементов, состоит в том, чтобы использовать псевдоэлемент, расположенный позади вашего 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>

Answer 2

Понятно, что при простом 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 3

Чтобы полоски работали точно по 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>