Фоновые фильтры
Настройка Фоновые фильтры (Backdrop filter) позволяет применить визуальные эффекты к фону или фоновому изображению, находящемуся за элементом. Чтобы эффект был видимым, элемент или его фон должны быть полностью или частично прозрачными.
Добавить опцию: панель Дизайн → раздел Внешний вид → нажмите «+» справа от параметра Фоновые фильтры и выберите из списка нужный фильтр.
Вы можете выбрать следующие фильтры:
- Размытие (Blur)
- Внешняя тень (Drop Shadow)
- Контрастность (Contrast)
- Яркость (Brightness)
- Насыщенность (Saturate)
- Оттенки серого (Grayscale)
- Инверсия (Invert)
- Сепия (Sepia)
- Поворот оттенка (Hue-rotate)
Можно добавить любое количество фильтров и сортировать их в любом порядке.
Как использовать Фоновые фильтры на практике
Вы можете размыть объект на фоне или инвертировать цвет фона под блоком.
Например, можно добавить Фоновый фильтр «Сепия», чтобы изменить цвет у фрагмента фона.
- Наложим на блок с фоном дополнительный блок с помощью абсолютного позиционирования.
- Зададим новому блоку полупрозрачный цвет фона (30%).
- Добавим блоку Фоновый фильтр «Сепия» со значением 100%.
Пошаговая инструкция с видео:
Как сделать размытие заднего фона для блока: Backdrop filter