用 CSS 制作虚线网格

Question

我希望整个 body 有一个虚线网格

body {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
}

问题是我想移动它以便在点 (0, 0) 处放置一个点，即 body 的左上角。所以整个结构应该移动到 -20px, -20px。或者可能有更好的解决方案？

Answer 1

更新

以下解决方案有效，但仅适用于固定 background-size。请参阅以获得更好的解决方案。

回答

您可以使用 background-position CSS 属性来实现您的想法。

body {
  background: white;
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background-position: -19px -19px;
}

Answer 2

除了更改 background-position 之外还有另一种方法，无论大小如何都可以：

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 40px 40px;
}

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 50px 30px;
}

基本上，想法是将 background-size 定义的区域内的点的位置更改为 top/left，而不是移动所有背景

用 CSS 制作虚线网格

Making a dotted grid with CSS

css

background-image

radial-gradients

更新

回答