backdrop-filter: обработка фона за полупрозрачным блоком
Backdrop-filter применяет эффект к области позади элемента. Частый пример — полупрозрачная панель, через которую виден размытый фон, а её собственный текст остаётся чётким.
Назначение
Backdrop-filter применяет эффект к области позади элемента. Частый пример — полупрозрачная панель, через которую виден размытый фон, а её собственный текст остаётся чётким.
Как это работает
Чтобы увидеть результат, фон панели должен пропускать часть содержимого позади неё. Непрозрачный фон скрывает обработанную область. Эффект зависит от структуры слоёв и границ, в которых формируется задний фон.
Пример
<style>.scene{padding:2rem;background:repeating-linear-gradient(45deg,#315f49 0 12px,#ead6a8 12px 24px)}.glass{padding:1rem;color:#122d20;background:rgba(255,255,255,.9)}@supports(backdrop-filter:blur(6px)){.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(6px)}}</style>
<div class="scene"><div class="glass"><h2>Учебная панель</h2><p>Текст должен оставаться читаемым и без размытия.</p></div></div>Что должно получиться
При поддержке свойства узор под панелью размывается. Запасной почти непрозрачный фон сохраняет читаемость без эффекта. Собственный текст панели не должен размываться вместе с фоном.
Граница применения и частая ошибка
Filter:blur на самой панели даёт другой результат и может размыть её текст. Не рассчитывайте на один удачный участок изображения: контраст меняется вместе с фоном. Проверьте стоимость эффекта при прокрутке на более слабом устройстве.
Самостоятельная проверка
Отключите backdrop-filter в DevTools и сравните читаемость. Замените узор светлым и тёмным фоном, увеличьте масштаб. Для ключевой информации оставьте достаточно плотную подложку независимо от декоративного эффекта.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.