Фоновые фильтры

Настройка Фоновые фильтры (Backdrop filter) позволяет применить визуальные эффекты к фону или фоновому изображению, находящемуся за элементом. Чтобы эффект был видимым, элемент или его фон должны быть полностью или частично прозрачными.

Добавить опцию: панель Дизайн → раздел Внешний вид → нажмите «+» справа от параметра Фоновые фильтры и выберите из списка нужный фильтр.

Вы можете выбрать следующие фильтры:

  • Размытие (Blur)
  • Внешняя тень (Drop Shadow)
  • Контрастность (Contrast)
  • Яркость (Brightness)
  • Насыщенность (Saturate)
  • Оттенки серого (Grayscale)
  • Инверсия (Invert)
  • Сепия (Sepia)
  • Поворот оттенка (Hue-rotate)

Можно добавить любое количество фильтров и сортировать их в любом порядке.

Как использовать Фоновые фильтры на практике

Вы можете размыть объект на фоне или инвертировать цвет фона под блоком.

Например, можно добавить Фоновый фильтр «Сепия», чтобы изменить цвет у фрагмента фона.

  1. Наложим на блок с фоном дополнительный блок с помощью абсолютного позиционирования.
  2. Зададим новому блоку полупрозрачный цвет фона (30%).
  3. Добавим блоку Фоновый фильтр «Сепия» со значением 100%.