css - 使用CSS制作点状网格

Question

我希望整个body都具有虚线网格

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

问题是我想移动它以便在点(0，0)处放置一个点，即body的左上 Angular 。因此，整个结构应移至-20px, -20px。还是有更好的解决方案？

Answer 1

更新

以下解决方案有效，但仅适用于固定的background-size。有关更好的解决方案，请参见@Temani Afif's answer。

回答

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

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