Благодаря свойству 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
.