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 | Список функций фильтра, разделенных пробелами, таких как:
или URL-адрес SVG-фильтра, который будет применен к фону |
Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме backdrop-filter
CSS Справочник: filter свойство
CSS Учебник: CSS Изображения
HTML DOM справочник: filter свойство