Замылить фоновую картинку средствами CSS

142
19 марта 2019, 18:40

На Behance нашел интересный эффект.

Могу ли я сделать такой фон средствами css?

Answer 1

-webkit-filter: blur

Отвечает за степень размытия.

.background-image { 
  position: fixed; 
  left: 0; 
  right: 0; 
  z-index: 1; 
  background-position:center; 
   
  display: block; 
  background-image: url('https://i.stack.imgur.com/jlpH8.jpg'); 
  width: 100vw; 
  height: 100vh; 
 
  -webkit-filter: blur(5px); 
  -moz-filter: blur(5px); 
  -o-filter: blur(5px); 
  -ms-filter: blur(5px); 
  filter: blur(5px); 
}
<div class="background-image"></div>

P.s картинку вставил вашу, для примера.

READ ALSO
Вёрстка 14 колонок в макете разрешение 1360px
HTML

Вёрстка 14 колонок в макете разрешение 1360px

Есть макет размер контента 1360pxИ 14 колонок

 166
Отключить перенос блока на новую строку
HTML

Отключить перенос блока на новую строку

потихоньку пытаюсь начать разбираться в html, не понимаю как сделать так, чтобы пятый и последующие блоки (один, два) оставались в своей строке,...

 163
Как растянуть блок на всю высоту родителя?
HTML

Как растянуть блок на всю высоту родителя?

У меня есть три блока с шириной 30% которые стоят в ряд при помощи:

 135
Как сделать чтобы текст уходил за границу div слева
HTML

Как сделать чтобы текст уходил за границу div слева

Обычное поведение текста, если он больше чем размер ограничивающего div и добавлены свойства white-space: nowrap; overflow: hidden; - текст выходит за границу...

 148