Как сделать размытый фон карточки не размывая контент внутри?

Question

[viva cristo64]

Надо сделать так, чтобы задний фон карточки был прозрачным, сделать я это могу, но тогда контент внутри тоже размывается, что не кстати. Нужно сделать вот так -

А именно эту карточку -

Все, что внутри карточки - не обязательно -, главное сделать этот блюр так, чтобы контент не блюрился с ним.

Answer 1

[Anonymous]

backdrop-filter: blur(12px); блоку, фон которого хочешь сделать размытым

Comments

[Vladislav]

Тоже вариант, но он не везде работает, в том же IE и лисе

[Сергей delphinpro]

Vladislav, ну уж IE пора бы перестать упоминать в приличном обществе =)

[Vladislav]

Сергей delphinpro, поверьте, ещё остаются заказчики и компании, которые сидят на IE, это их прихоти, а не наши, разработчиков

Answer 2

[Vladislav]

background-color: transparent родителю
Через ::before сделать блок, спозиционировав его под контентом через z-index: - 1 и этому же блоку, который через ::before задать свойство filter

Comments

[viva cristo64]

Возможно я сделал что-то не так, но у меня не сработало. Cпасибо, что попытались помочь! Может мне и не помогло (скорее всего из-за того, что я что-то сделал не так, т.к. только учусь), думаю другим вы поможете

[Vladislav]

MaminProgrammist, backdrop-filter: blur(12px) то что тебе выше подсказали правильно, но не везде оптимальный, так как например в IE и Firefox он не работает