在 css 中创建等距点背景

Question

期望的结果

我想创建一个由等距点组成的背景。 我试过结合线性渐变无济于事。 我不想使用图像，因为这意味着我不能拥有动态的前景色/背景色

谢谢

Answer 1

你需要radial-gradient()这里：

html {
  height:100%;
  
  --s: 30px; /* control the space between circles */
             /*        v-- the radius of circle */
  --g: radial-gradient(5px at 25% 50%,red 96%,#0000);
  background: var(--g),var(--g) var(--s) calc(var(--s)/2);
  background-size: calc(2*var(--s)) var(--s);
}