使用CSS背景图像使用具有偏移

Question

我需要使用CSS输出重复的背景网格。

我已成功使用repeating-linear-gradient()功能，并且显示效果很好：

然而，我需要将水平轴上的网格移动100px。

我已添加background-position属性：

但是，最后，它给了我一个奇怪的结果。绘制了一些无关的垂直线。

有趣的是，此行固定在计算机屏幕上，因此如果您调整该窗口的大小，您可以看到此行未随之移动。 I've recorded a video to demonstrate

为什么会发生这种情况？如何应对此行为？

是否有一些替代方法可以绘制这样一个偏移的网格？

Please, take a look at this JSFiddle

以下是我使用的代码：

:root {
  --background-grid-color: deeppink;
  --background-fill-color: #000;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Vertical lines */
  background-color: var(--background-fill-color);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 200px
    ),
    repeating-linear-gradient(
      to bottom,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 200px
    )
  ;
  background-position: 100px 0, 0 0;
}

Answer 1

您可以使用background-size和linear-gradient代替repeating-linear-gradient来修复它：

:root {
  --background-grid-color: deeppink;
  --background-fill-color: #000;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Vertical lines */
  background-color: var(--background-fill-color);
  background-image:
    linear-gradient(
      to right,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      var(--background-grid-color) 0,
      var(--background-grid-color) 1px,
      transparent 1px,
      transparent 100%
    )
  ;
  background-position: 100px 0, 0 0;
  background-size: 200px;
}

Answer 2

我不确定是什么原因引起了这个神器，可能它与背景大小有关。

最后，我设法通过为两个背景图像添加以下CSS属性来克服这个问题：

background-size: 200px 200px, 200px 200px;