Блог

Я пытаюсь создать сетчатый фон из точек. Я не могу просто использовать изображение, потому что мне нужно, чтобы все было настраиваемым:

• цвет фона
• цвет точки
• размер точки
• пробел между точками

Если нет лучшего решения, я думаю, что единственный способ добиться этого — использовать чистый CSS. Я немного осмотрелся, и пока самое близкое, что я нашел, — это использование радиального градиента. Однако у меня возникли проблемы; Я не смог найти решение, которое позволило бы мне настраивать как размер точки, так и расстояние между точками, сохраняя при этом форму круга. Я приблизился, но в итоге мои точки выглядят как бриллианты вместо кругов. Вот что я придумал до сих пор:

https://jsfiddle.net/yzpuydtn/

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

У кого-нибудь есть какие-либо предложения? Изначально я хотел бы, чтобы мои точки были размером 2x x 2px и 40 пикселей друг от друга. Есть ли лучший способ сделать это, или я просто неправильно настраиваю свой градиент? Я думаю, что я близок, но в зависимости от того, как я увеличиваю масштаб, они выглядят как круги, ромбы или квадраты, и мне нужно, чтобы они всегда выглядели как круги.

Используя %: 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%;
}