使用 CSS 背景图像使用带偏移的渐变输出网格

Question

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

为此，我设法使用了 repeating-linear-gradient() 函数，而且效果很好：

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

我添加了 background-position 属性这样做：

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

有趣的是，这条线是固定在电脑屏幕上的，所以如果你调整它的大小 window，你会看到这条线并没有随之移动。 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;

使用 CSS 背景图像使用带偏移的渐变输出网格

Using CSS background image to output grid using gradient with offset

html

css

background

background-image