CSS Эффект размытия и цвет фона

Question

У меня есть выпадающее меню с эффектом размытия. Пока у меня есть это:

  .transparent-header {
        background-color: rgba(0,0,0,0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }

ПРОБЛЕМА

На данный момент в WebKit размытие слишком темное из-за альфа 0,8. Если я изменю это, когда фильтр размытия недоступен из-за более старого браузера, Firefox, et c, меню будет слишком прозрачным.

ЧТО НУЖНО

• При наличии размытия: размытие + фоновый альфа 0.5
• Когда размытие недоступно: фоновый альфа 0.9

Возможно ли это?

Answer 1

Вы можете использовать @supports для выборочного применения ваших стилей на основе поддержки браузера:

    .transparent-header {
        background-color: rgba(0,0,0,0.9);
    }

    @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
        .transparent-header {
            background-color: rgba(0,0,0,0.5);
            -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
        }
    }