Как сделать размытый фон?

Question

[Александр Коновалов]

Здравствуйте! Хочу сделать размытый фон у блока. Пишу filter: blur(5px); - блок размывается, но и текст на нем тоже. Как размыть только фон?

<div class="footer-under">
			<div style="margin: 40px;">
               <div class="footer-under-contacts">
                    <div><i class="fa fa-phone"></i> </div>
                    <div><i class="fa fa-envelope"></i> </div>
                    <div><i class="fa fa-map-marker"></i> </div>
                    <a href="" target="_blank"><div style="font-size:24px;background:#fff;color:#000;margin:10px;width:107px;"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Форум</div></a>
				</div>
            </div>
        </div>

.footer-under{width:500px;height:300px;background:#ae3835;border-radius:0 10px 10px 0;     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, .2), 0 3px 0 #812b29, 0 4px 0 rgba(0, 0, 0, .2), 0 6px 0 #812b29, 0 7px 0 rgba(0, 0, 0, .2);}

Answer 1

[_ _]

Только через backdrop-filter. Кроссплатформенность очень низкая. Как вариант - повесить filter на псевдоэлемент before и разместить через position absolute под основным содержимым.

Comments

[Александр Коновалов]

Александр Марченко спасибо, а можно подробнее?

[Ярослав Иванов]

Александр Коновалов: https://msurguy.github.io/background-blur/