Бэкграунд из квадратных точек

#css #css3 #html5 #svg #css_animation

Я хочу получить бэкграунд, как в моем примере, только с прозрачным фоном (а не белым). 

Это возможно на CSS без изображений?

  body {
      background: linear-gradient(90deg, #fff 20px, transparent 1%) center, linear-gradient(#fff
20px, transparent 1%) center, #000;
      background-size: 22px 22px;
     }

    

Ответы

Ответ 1

Использование pattern SVG

Фон растровая картинка, а поверх неё будет сетка из квадратных точек, которые реализованы
с помощью pattarn Более подробно о паттернах здесь  

  



            
             
            
               


Цифры на рисунке немного другие, как в коде, но суть не меняется 





	 





Можно сделать варианты анимаций паттерна 

Точки увеличиваются в размере и перекрывают картинку     


 
    



анимация после клика





	 





Горизонтальные жалюзи 







	 





Вертикальные жалюзи 







	 



Ответ 2

Не то чтобы совсем без изображений. Без внешних изображений.



body{
  background-image: url('data:image/svg+xml;utf8,');
  background-size: 22px 22px;
  background-color:#cda;
}


Ответ 3

CSS вариант:



div { 
  background: 
    radial-gradient(circle at 0px 0px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 1px 0px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 2px 0px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 3px 0px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 0px 1px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 1px 1px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 2px 1px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 3px 1px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 0px 2px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 1px 2px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 2px 2px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 3px 2px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 0px 3px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 1px 3px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 2px 3px, #000 0.5px, #0000 1px),
    radial-gradient(circle at 3px 3px, #000 0.5px, #0000 1px)
    ;
  background-size: 20px 20px;
  height: 100vh;
}

body {
  background: wheat;
}