backdrop-filter

Пример

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

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

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

Определение backdrop-filter

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

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

Показ демо ❯

Значение по умолчанию:	none
Унаследовано:	no
Анимируемый:	no. Читайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.backdropFilter="grayscale(100%)"

Поддержка backdrop-filter

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

Цифры, за которыми следует -webkit - указывают первую версию, которая работала с префиксом.

Свойство
backdrop-filter	76.0	17.0	70.0*	9.0 -webkit-	63.0

* Чтобы заставить это работать, откройте about:config и установите для параметра thelayout.css.backdrop-filter.enabled значение true, а также для параметров gfx.webrender.all должно быть установлено значение true.

Синтаксис backdrop-filter

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

Значения backdrop-filter

Значение	Описание	Демонстрация
none	Значение по умолчанию. К фону фильтр не применяется	Демо ❯
filter	Список функций фильтра, разделенных пробелами, таких как: blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() или URL-адрес SVG-фильтра, который будет применен к фону	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit