Страницы

Поиск по вопросам

четверг, 1 ноября 2018 г.

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

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


Ответ

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

Комментариев нет:

Отправить комментарий