Властивість backdrop-filter

18

Від автора: властивість 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 для напису.

Властивість backdrop-filter

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);
}

Кінцевий ефект буде виглядати наступним чином:

Властивість backdrop-filter

Демо

В даний час властивість підтримується тільки в Safari 9 і вище. Тому переглянути його можна тільки в цьому браузері. Активувати властивість Chrome і Opera з допомогою прапора «Experimental Web Platform Features» не вийде.

Нижче показано, як можна змінювати колір тексту залежно від кольору фону (світлий текст на темному фоні і навпаки), застосовуючи фільтр inverse() до тексту і інвертуємо фон за фільтром з допомогою backdrop-filter.

Наступний приклад – перемикач в нічний режим на фільтрі inverse().

З допомогою фільтра blur() можна створювати перемикачі графічного контенту:

Підтримка в браузерах

Метод застосування фільтрів (розмиття, відтінки сірого, відтінок і т. д.) до вмісту/елементів під цільовим елементом. Статистика сайту caniuse.com