5

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

Вот пример введите сюда описание изображения

2
  • 1
    а где вы взяли пример? Это просто фото или с какого-то сайта скриншот? Если с сайта - может ссылку дадите на него?) Commented 12 янв. 2016 в 13:25
  • @АлексейШиманский Взята картинка с сайта Apple в разделе бета тестирования iOS. Если бы сайт у них был готов, вряд-ли бы сюда писал)) Commented 12 янв. 2016 в 21:28

2 ответа 2

9

Есть не суперкроссбраузерная, но рабочая штука, 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);
}
<div><div></div></div>

Подробнее здесь - 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+

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.