Как сверстать блок с blur и fixed background?

Question

[iBird Rose]

собственно вопрос. если бы блок был обычный. не парился бы и в фотошопе заблюрил картинку и для блока по середине задал бы фоном с подгоном bg по высоте, но тут требуют чтобы этот блок был, что то на подобии параллакса. чтобы ездил внутри этого блока. это то сделаю потом на js - а щас вопрос только в том как сделать такой фон для блока, если блок будет передвигаться по оси Y?

Answer 1

[Сергей delphinpro]

filter: blur(10px)
??

Comments

[iBird Rose]

если сделать блоку в середине блюр - задний фон останется как есть без размытия.

[Сергей delphinpro]

iBird Rose: у блока в середине делаем еще одну подложку, в ней позиционируем тот же фон что и на заднем плане. И все будет как надо.

[Сергей delphinpro]

в примере ниже как раз это продемонстрировано.

[iBird Rose]

Сергей: там продемонстрирован blur на бэкграунд) я о таком не знал)

[Сергей delphinpro]

iBird Rose: Да какая разница. svg-шный блюр более кроссбраузерное решение, только и всего.

[iBird Rose]

Сергей: обычный блюр выглядит так. он не блюрит бэкграунд data3.floomby.com/files/share/8_9_2016/11/xO4DZKuR...

[Сергей delphinpro]

iBird Rose: Блин. Он блюрит весь блок. Если у блока будет бэк - то он заблюрится. Я же про это написал (видимо не достаточно очевидно) - дополнительная подложка с таким же фоном и т.д.

[Сергей delphinpro]

iBird Rose: Более того ( я посмотрел внимательно тот пример ) - в примере svg фильтр используется как раз-таки для обеспечения кроссбраузерности. а вся кухня всё с той же подложкой (блок #search-bg с абсолютным позиционированием под блоком с контентом).

[Сергей delphinpro]

И, между прочим, по адресу https://jsfiddle.net/media/blur.svg разумеется нет никакой картинки. Вам этот файл еще придется самому написать (там в принципе не сложно, просто фильтр описать)

[iBird Rose]

Сергей: да. я поторопился с комментом наверху. щас разобрался как работает в примере все. обычный блюр) просто правильно применены работа с position)

[Kovalsky]

iBird Rose: Сергей: да, blur.svg это фигня, в интернетах есть примеры, тысячи их. Тот же tympanus codrops

[Kovalsky]

<svg width="0" height="0" style="position:absolute"><filter id="blur3px"><feGaussianBlur in="SourceGraphic" stdDeviation="3"></feGaussianBlur></filter></svg>

Answer 2

[Kovalsky]

Утащено у какого-то американца - https://jsfiddle.net/20uqjmqy/