css - CSS背景：重复线性渐变的偏移量

Question

<div>我在 SASS中绘制了一个网格作为以下方式的重复背景：

background-image:
  repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
  repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
  repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

它呈现以下方式：

但我希望它以15px向左偏移（或4 * $minor-grid-size + 15px向右偏移）呈现，即：

现在我不能使用margin-left，因为它也会偏移<div>标签内的元素，我不希望这样，看这里的小提琴（不要关注 JS）。

我只希望背景有一个偏移量。

Answer 1

您可能会使用background-position财产。

.repeating-grid {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  background-size: $major-grid-size $major-grid-size;
  background-image:
    repeating-linear-gradient(0deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(-90deg, $major-grid-color, $major-grid-color $major-grid-weight, transparent $major-grid-weight, transparent $major-grid-size),
    repeating-linear-gradient(0deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size),
    repeating-linear-gradient(-90deg, $minor-grid-color, $minor-grid-color $minor-grid-weight, transparent $minor-grid-weight, transparent $minor-grid-size);

  background-position: 15px 0;
}

Answer 2

我遇到了一个否定的问题，background-position导致重复模式的结尾被切断：

background-image: repeating-linear-gradient(90deg, red, red 200px, blue 200px, blue 400px);
background-position: -50px -50px;

我发现使用负偏移来repeating-linear-gradient解决问题：

background-image: repeating-linear-gradient(90deg, red -50px, red 150px, blue 150px, blue 350px);