Від автора: властивість backdrop-filter CSS дозволяє застосовувати фільтри до контенту позаду елемента. Властивість є розширенням до специфікації Filter Effects Module Level 1, в якій вводиться властивість filter. Нове властивість використовує синтаксис filter, але сам ефект застосовується до фону елемента.
Подібні ефекти можна зустріти в інтерфейсах пристроїв під управлінням iOS7 і вище, а також OS X Yosemite і вище. Без властивості подібних ефектів можна домогтися тільки за допомогою редагування фонового зображення і застосування технік кадрування і позиціонування.
Щоб ефект був видний, необхідно, щоб 2 елементи були розташовані один над іншим по осі Z. Ефект працює як на вкладених елементах, так і на елементах з абсолютним позиціонуванням. Також фон, до якого застосовується backdrop-filter, повинен бути напівпрозорим. backdrop-filter змушує движок браузера шукати контент за стилизуемым елементом, а не його власний фон. Потім до знайденого вмісту застосовується фільтр, і у фінальному рендері фон компонується з іншими елементами на сторінці.
Застосування властивості backdrop-filter на елемент створює новий контекст стека, як і властивість opacity.
Зверніть увагу, що ця властивість може негативно позначитися на продуктивності, особливо коли застосовується до великої кількості елементів або до великої області на сторінці. Використовуйте цю властивість з обережністю.
Офіційний синтаксис
backdrop-filter: none |
За замовчуванням: none
Застосовується до: всім елементам. В SVG застосовується до контейнерів без тега і всім графічним елементам
Анимируется: так
Значення
none — значення за замовчуванням. До фону не застосовуються фільтри.
filter-function-list — набір функцій фільтрів, розділених пробілом, що застосовуються у порядку оголошення. Нижче наведено список доступних функцій фільтрів, який збігається з властивістю filter: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), url()
Приклади
Нижче наведено простий приклад, як за допомогою backdrop-filter створити ефект замороженого скла. Розмітка – зображення і div для напису.
Morgana
played by Katie McGrath
Напис абсолютно позиційована поверх нижньої частини зображення, до неї застосовано властивість backdrop-filter.
.caption {
padding: 0.5 em 1em;
position: absolute;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(4px);
background-color: rgba(255, 255, 255, 0.5);
}
Кінцевий ефект буде виглядати наступним чином:
Демо
В даний час властивість підтримується тільки в Safari 9 і вище. Тому переглянути його можна тільки в цьому браузері. Активувати властивість Chrome і Opera з допомогою прапора «Experimental Web Platform Features» не вийде.
Нижче показано, як можна змінювати колір тексту залежно від кольору фону (світлий текст на темному фоні і навпаки), застосовуючи фільтр inverse() до тексту і інвертуємо фон за фільтром з допомогою backdrop-filter.
Наступний приклад – перемикач в нічний режим на фільтрі inverse().
З допомогою фільтра blur() можна створювати перемикачі графічного контенту:
Підтримка в браузерах
Метод застосування фільтрів (розмиття, відтінки сірого, відтінок і т. д.) до вмісту/елементів під цільовим елементом. Статистика сайту caniuse.com
