圆圈图案的背景

Question

我知道制作虚线背景图案是多么容易。

body {
  background: linear-gradient(90deg, #eee 30px, transparent 1%) center, 
    linear-gradient(#eee 30px, transparent 1%) center, #444;
  background-size: 34px 34px;
}

请告诉我，得到圆形而不是方形有多容易？

■ ■ ■   ● ● ●
■ ■ ■ → ● ● ●
■ ■ ■   ● ● ●

Answer 1

只需使用radial-gradient，然后控制background-size 和/或色标的百分比即可实现所需的图案：

body {
  background: radial-gradient(circle at center, #000 20%, transparent 22%),#eee; 
  background-size: 34px 34px;
}

body {
  background: radial-gradient(circle at center, #000 10%, transparent 12%),#eee; 
  background-size: 50px 50px;
}

---

您还可以使用 SVG 创建一个圆形并将其与背景一起使用。

body {
 background-image: url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="20" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}

如果您需要考虑更复杂的形状，SVG 可能是更通用的解决方案：

body {
 background-image: url('data:image/svg+xml,<svg height="200" width="200"  xmlns="http://www.w3.org/2000/svg" ><polygon points="100,10 40,198 190,78 10,78 160,198" fill="#000" /></svg>'); 
  background-size: 30px 30px;
}