Как сделать фон “сетку из точек” с помощью css3?

382

29 июля 2017, 05:09

Подскажите, пожалуйста, как сделать с помощью css3 такой фон? И возможно ли в принципе?

.bg { 
  width: 100%; 
  height: 50px; 
  background: url(https://sport.mail.ru/img/_main/subnav.png) 
}

<div class="bg"></div>

Answer 1

Градиент:

.dotted { 
  padding: 2.25em 1.6875em; 
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%); 
  -webkit-background-size: 3px 3px; 
  -moz-background-size: 3px 3px; 
  background-size: 3px 3px; 
   
  width:100%; 
  height: 50px; 
}

<div class="dotted"></div>

Answer 2

Вариант с SVG

.bg { 
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><circle r="1" fill="#888" /></svg>') repeat; 
  height: 50px; 
  width: 100%; 
}

<div class="bg"></div>

Answer 3

Я пытался самостоятельно сделать такой фон таким вот способом, однако у меня не совсем получалось.

.bg { 
  width: 100%; 
  height: 50px; 
  background: radial-gradient(#000 5%, transparent 20%) 0 0, radial-gradient(rgba(0,0,0,.1) 1%, transparent 1%) 50px 50px; 
  background-color: #fff; 
  background-size: 5px 5px; 
}

<div class="bg"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Фон или картинку на картинку CSS

Подскажите самый простой и кроссбраузерный вариант наложения фона или картинки на картинкуНужно тупо затемнить

476

Java

Помогите с фоном пожалуйста! [требует правки]

Как сделать фон черным с JTextField?

271

Java

Java 8: Optional против if else. Что быстрее?

С введением в Java 8 новой конструкции Optional у меня возникли разногласия с коллегами по поводу скорости работы Optional vs if-else vs тернарный операторНесколько...

352

Java

Почему не стартует Tomcat (OS не дает доступ к catalina.sh)?

Я пытаюсь запустить Tomcat но получаю вот такую ошибку:

327