时间戳

首页 > 解决方案 > 圆圈图案的背景

css - 圆圈图案的背景

问题描述

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

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

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

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

标签： cssbackgroundlinear-gradients

解决方案

只需使用径向渐变，然后控制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;
}

推荐阅读