Благодаря свойству CSS backdrop-filter можно применить к фону под элементом различные фильтры: оттенки серого, контраст, размытие и др. Его работа похожа на свойство filter, за исключением того, что backdrop-filter применяется только к фону элемента.
Чтобы увидеть работу свойства основной элемент или его фон должны быть хотя бы частично прозрачными.
Похожие эффекты можно видеть в интерфейсах продуктов Apple: IOS, OSX Yosemite и т.п. Без фильтра такой эффект можно получить разделив элемент на основной контент и фон, то есть на два тега, и применив filter к фоновому элементу. Теперь же сделать «матовое стекло» на фоне гораздо проще. Пример работы:
See the Pen
backdrop-filter by Андрей (@adlibi)
on CodePen.
Синтаксис
backdrop-filter: none | <фильтр>
Пример:
.foreground {
backdrop-filter:blur(5px);
}В настоящий момент можно применить следующие функции:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()– для SVG фильтров
Можно использовать несколько функций одновременно
.element {
backdrop-filter: grayscale(0.5) opacity(0.8) /* и так далее */;
}Пример разных значений свойства
See the Pen
backdrop-filter — все by Андрей (@adlibi)
on CodePen.
На момент подготовки этого материала backdrop-filter работает кроссбраузерно – есть поддержка для 86% браузеров. Свойство не работает в Internet Explorer и в некоторых версиях мобильных браузеров. В Firefox и Opera свойством можно пользоваться, если подключить вручную. В Edge и Safari поддерживается -webkit-background-filter.
Как подключить в Opera и Firefox
Чтобы пользоваться возможностями background-filter, в Opera на странице opera:flags раздел необходимо установить Experimental Web Platform features в Enabled, а в Firefox – установить в True значении layout.css.background-filter.enabled на странице about:config.