用 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. 请参阅@Temani Afif 的答案以获得更好的解决方案。

回答

您可以使用background-positionCSS 属性完全按照您的想法进行操作。

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到顶部/左侧而不是移动所有背景