Размытый фон div

#css #css3

Как реализовать blur эффект фона div элемента, чтобы он подстраивался под background
body.

Вот пример

    

Ответы

Ответ 1

Есть не суперкроссбраузерная, но рабочая штука, css-свойство filter



div {
  background: url(http://lorempixel.com/800/800/people/3/);
  width: 800px;
  height: 800px;
  position: relative;
}
div> div {
  position: absolute;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: transparent;
  background: url(http://lorempixel.com/800/800/people/3/) -300px 500px;		
  left: 300px;
  top: 300px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}





Подробнее здесь - https://webref.ru/css/filter
Ну и спецификации - http://www.w3schools.com/cssref/css3_pr_filter.asp


Ответ 2

Также можно попробовать использовать blur.js - http://blurjs.com/

А можно и такое решение - http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Но опять таки, IE9+