Размытие фона на js?

Question

[Insom84]

Есть код:

<div id="blur_back" >
    <p>бла бла бла</p>
</div>

<style>
#blur_back{
padding:40px; 
backdrop-filter: blur(2px);
}
</style>

backdrop-filter: blur(2px); отвечает за размытие фона. Но мало где поддерживается. Есть како-нибудь легкий вариант на js например сделать это размытие?
Спасибо!

Answer 1

[MrColdCoffee]

если не привязываться к разметке в вопросе, то ВОТ ТАК

Answer 2

[profesor08]

Используй backdrop-filter. Где не поддерживается, ничего страшного не случится.

Comments

[profesor08]

Евгений Голубев, это достаточное решение проблемы автора вопроса.

Answer 3

[Igor Koch]

Возможны 2 варианта, оба костыльные:

1. https://github.com/ahsane/backdropjs/blob/master/b... - Работает только со статичным контентом (открывает страницу в iframe и накладывает фильтр)

2. https://codepen.io/mixal_bl4/pen/EwPMWo - наложение fixed фона к элементу и применению к нему blur (Также статика - если background не картинка, можно использовать скрин document'a полученный с помощью
html2canvas https://html2canvas.hertzen.com/ )

Answer 4

[Нікіта]

filter: blur(5px); может это поможет

Comments

[Insom84]

нужен блюр именно фона..

Answer 5

[Тимур Худиев]

Блюр фона проще всего сделать через дополнительную прослойку. Только нужно разметку подготовить для этого