html – 尝试使用CSS制作可配置的圆点背景

2023年1月28日 322次阅读

我正试图用点做网格背景.我不能只使用图像,因为我需要一切可配置：

>背景颜色
>点颜色
>点大小
>点之间的空间

除非有更好的解决方案,否则我认为实现这一目标的唯一方法就是使用纯CSS.我做了一些环顾四周,到目前为止,我发现最接近的是使用径向渐变.我遇到了麻烦;我一直无法找到一种解决方案,可以让我在保持圆形的同时配置点的大小和点之间的空间.我已经接近了,但是我的圆点最终看起来像钻石而不是圆圈.这是我到目前为止所提出的：

https://jsfiddle.net/yzpuydtn/

body {
  background-image: radial-gradient(black 2px, white 2px);
  background-size:40px 40px;
}

有没有人有什么建议？最初我想让我的点分别是2px x 2px和40 px.有没有更好的方法来做到这一点,或者我只是错误地配置我的渐变？我觉得我很接近,但根据我的缩放方式,它们看起来像圆圈,钻石或正方形,我需要它看起来像圆圈.

最佳答案 使用％：
https://jsfiddle.net/yzpuydtn/11/

使用vw：
http://jsfiddle.net/otwhu0uk/2/

这是一个例子.我真的希望这会对你有所帮助.

body {
  /* Controls size of dot */
  background-image: radial-gradient(black 5%, white 0%);
  /* Controls Spacing, First value will scale width, second, height between dots */
  background-size:5% 10%;
}
点赞