Css 背景：重复线性渐变的偏移量

Question

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

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> 标签内的元素，我不想这样，see the Fiddle here（不要注意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);

Css 背景：重复线性渐变的偏移量

Css background: offset for repeating-linear-gradient

css

sass

repeating-linear-gradient