使用CSS制作点状网格

Question

我希望整个body都有点状网格。

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

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

- Eugene Barsky

Answer 1

更新

以下解决方案可以工作，但仅适用于固定的background-size。请参见@Temani Afif的答案以获取更好的解决方案。

答案

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

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

- Tim Klein

---

谢谢，这正是我想要的！！奇怪的是，我尝试了将其放在整个代码之上，但它没有起作用。 - Eugene Barsky

在您的情况下，您正在利用background简写属性，该属性可以提供大量参数。如果您将background-position属性（或任何其他特定于背景的属性）放在background简写属性之前，则会被简写属性覆盖，并填充默认值。重要的是，在任何地方使用简写属性时，首先设置它，然后设置任何特定属性。其他简写属性的示例包括animation、flex、transition等。 - Tim Klein

非常感谢您的解释！确实，我忘记了 background 的简写形式。 - Eugene Barsky

不幸的是，radial-gradient 方法绘制的圆形没有反锯齿效果。一个替代方法是使用 Houdini worklet 来自定义绘画过程，并按照 https://codepen.io/arnellebalane/pen/yLVOOgW 中所示进行绘制。然而，截至2023年初，Houdini 仅在基于Chromium的浏览器中得到支持（不包括Firefox或Safari）。 - Keavon

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定义的区域内的点的位置改变到顶部/左侧，而不是移动整个背景。

- Temani Afif

---

非常好！你能解释一下 at 2px 2px 和 1px 是什么意思吗？ - Eugene Barsky

@EugeneBarsky 1px 基本上是圆的半径（因为我们使用径向渐变），所以我应该将圆的中心放在 2px 2px，也可以是 1px 1px，应该会得到相同的结果..这里有一个更大值的示例以更好地查看: https://jsfiddle.net/（半径为10px，我们将中心放在10px 10px处） - Temani Afif

@EugeneBarsky编辑了答案，以避免混淆，因此我们将其放置在1px 1px处，这是半径...当然，您可以将其放置在任何位置（最初我将其设置为2px 2px，以使其远离边缘） - Temani Afif

谢谢您的解释！不幸的是，jsfiddle的链接无法使用。 - Eugene Barsky