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>标记中的元素，我不希望这样，看这里的飞碟 (不要注意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);

​

​