Как реализовать адаптивное размытие фона (responsive blur)?

Question

[felixexter]

Что имеем:

• Резиновый блок с резиновым изображением в фоне и прочими элементами внутри.
• Внутри находится блок поменьше с фиксированной шириной.

Что нужно:

• Реализовать внутреннему блоку с фиксированным размером размытый фон;
• В качестве источника могут быть любые элементы, находящиеся за ним, и фон родительского элемента;
• Фон должен перерисовыватсья при изменении размера окна браузера, чтобы картинка не расходилась;
• Поддержка последних двух версий современных браузеров и IE9+ (для IE8 нужен костыль);
• Адекватная скорость отрисовки размытого фона.

Что не подходит:

• CSS3 Filter/SVG - размывает контент и не кроссбраузерно;
• blurjs.com - не работает как нужно и поддержка плагина медленно продвигается.

Пример того, что должно получиться

Comments

[mx6001]

Решение нашли?

Answer 1

[Lisonok]

Создайте filter.svg

<?xml version="1.0" standalone="no"?>
<svg width="1" height="1" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2 2" />
    </filter>
  </defs>
</svg>

Блоку добавьте стили

.block{
    filter: url(filter.svg#blur); /* FF, IE10 & Opera */
   -webkit-filter: blur(2px); /* Chrome */
}

для ie8 добавьте

filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); /* IE8 */

Comments

[felixexter]

Не подходит. Внутри должен быть тоже контент. И фон родителя не размывается. jsfiddle.net/6XkFC

Answer 2

[Mangor]

есть вариант загружать картинку в канвас в нем уже делать размытие.