Как реализовать blur эффект фона div
элемента, чтобы он подстраивался под background body.
-
1а где вы взяли пример? Это просто фото или с какого-то сайта скриншот? Если с сайта - может ссылку дадите на него?)– Алексей ШиманскийCommented 12 янв. 2016 в 13:25
-
@АлексейШиманский Взята картинка с сайта Apple в разделе бета тестирования iOS. Если бы сайт у них был готов, вряд-ли бы сюда писал))– КонстантинCommented 12 янв. 2016 в 21:28
Добавить комментарий
|
2 ответа
Есть не суперкроссбраузерная, но рабочая штука, 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
Также можно попробовать использовать blur.js - http://blurjs.com/
А можно и такое решение - http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
Но опять таки, IE9+