Свойство backdrop-filter CSS

Определение и использование

backdrop-filter Свойство используется для применения графического эффекта к области за элементом.

Совет:Чтобы увидеть эффект, элемент или его фон должны быть хотя бы частично прозрачными.

Пример

Добавить графический эффект за элементом:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Попробуйте сами

CSS синтаксис

backdrop-filter: none|filter|initial|inherit;

Значение свойства

Значение Описание
none Значение по умолчанию. Не применять фильтр к фону.
filter

Список фильтр функций, разделенных пробелом, например:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

или ссылка на SVG фильтр.

initial Установить этот параметр в значение по умолчанию. См. также: initial.
inherit Эта функция наследуется от родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: none
Наследование: Нет
Создание анимации: Поддержка. См. также:Свойства анимации.
Версия: CSS3
JavaScript синтаксис: object.style.backdropFilter="grayscale(100%)"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот свойство.

Числа с префиксом -webkit- указывают на первую версию, поддерживающую этот префикс.

Кром Эдж Фаерфокс Сафари Опера
76 79 103 9 -webkit- 63

Связанные страницы

Учебник:Изображения в CSS

См. также:Атрибут CSS filter

См. также:HTML DOM фильтр свойство