Создание точечной сетки с помощью CSS - PullRequest
Новая
       27

Создание точечной сетки с помощью CSS

2 голосов
/ 26 марта 2019

Я хочу, чтобы у всего body была пунктирная сетка 

body {
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
}

Проблема в том, что я хочу сместить ее так, чтобы точка помещалась в точку (0, 0), то есть в верхний левый угол body. Таким образом, вся структура должна быть сдвинута на -20px, -20px. Или, возможно, есть лучшее решение?

Ответы [ 2 ]

3 голосов
/ 26 марта 2019

Обновление

Следующее решение работает, но только для фиксированной background-size.См. @ Ответ Темани Афифа для лучшего решения.

Ответ

Вы можете использовать свойство background-position CSS, чтобы делать именно то, о чем вы думали. 

body {
  background: white;
  background-image: radial-gradient(black 1px, transparent 0);
  background-size: 40px 40px;
  background-position: -19px -19px;
}
2 голосов
/ 26 марта 2019

Вот еще один способ в дополнение к изменению background-position, который может работать независимо от размера: 

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 40px 40px;
}

body {
  background-image: radial-gradient(circle at 1px 1px, black 1px, transparent 0);
  background-size: 50px 30px;
}

По сути, идея состоит в том, чтобы изменить положение точек внутри области, определенной background-size, вверх / влево, вместо смещения всего фона

...