filter: визуальная обработка элемента и его содержимого
Свойство filter применяет визуальные преобразования к отрисованному элементу: например, меняет насыщенность, яркость или добавляет размытие. Исходное изображение или текст при этом не переписываются.
Назначение
Свойство filter применяет визуальные преобразования к отрисованному элементу: например, меняет насыщенность, яркость или добавляет размытие. Исходное изображение или текст при этом не переписываются.
Как это работает
Несколько функций перечисляются через пробел и применяются в указанном порядке. Если фильтр назначен контейнеру, результат затрагивает его отрисованное содержимое, включая текст и вложенные элементы.
Пример
<style>.swatch{display:inline-block;padding:2rem;background:linear-gradient(120deg,#286b4c,#e1af58);color:white}.muted{filter:grayscale(1)}</style>
<p><span class="swatch">Исходный цвет</span></p>
<p><span class="swatch muted">Без насыщенности</span></p>Что должно получиться
Второй образец отображается в оттенках серого, первый сохраняет цвет. Геометрия и исходные CSS-цвета не изменяются: меняется итоговое визуальное представление.
Граница применения и частая ошибка
Размытие не защищает секретный текст: данные остаются в документе. Фильтр на крупной области или анимация сложного эффекта могут увеличить затраты на отрисовку. Контраст после фильтра нужно оценивать заново.
Самостоятельная проверка
Сравните grayscale, brightness и blur на отдельной копии образца. Затем перенесите фильтр на родителя и посмотрите, изменился ли текст. Уберите эффект и убедитесь, что он не несёт единственную важную информацию.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.