filter накладывает визуальные эффекты - размытие, яркость, оттенки серого и другие - прямо в CSS, без графического редактора. Значение - одна функция или несколько подряд через пробел, они применяются по порядку слева направо, и порядок реально меняет результат. На макет страницы filter не влияет вообще.
В этом уроке
Попробуй прямо сейчас: у карточки сразу две функции фильтра через пробел - brightness(0.6) contrast(1.8). Поменяй их местами на contrast(1.8) brightness(0.6) - результат заметно другой, хотя набор функций тот же самый: браузер применяет их по порядку слева направо, а не одновременно и не независимо друг от друга.
filter: одна функция или несколько подряд
Значение filter - это либо none (по умолчанию, без эффектов), либо одна или несколько filter-функций через пробел. Всего в спецификации десять функций - blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia (плюс url() для SVG-фильтров) - какие именно и что каждая делает, разберём в следующих двух уроках. Здесь важнее общий принцип: когда функций несколько, браузер применяет их СТРОГО ПО ПОРЯДКУ, слева направо, к уже изменённому предыдущей функцией результату - а не ко всем сразу к оригиналу. Из-за этого один и тот же набор функций в разном порядке может дать заметно разный результат.
.photo {
filter: grayscale(40%) brightness(1.1);
} - сначала обесцвечивание, потом чуть ярче делает уже обесцвеченную картинку.
Тот же набор функций, другой порядок - и другой результат:
.photo {
filter: brightness(1.1) grayscale(40%);
} - сначала делает ярче, потом обесцвечивает уже осветлённую картинку - визуально НЕ то же самое, даже с одинаковым набором функций.
Что filter не трогает: макет остаётся прежним
filter не влияет на макет страницы вообще: у элемента не меняются ни ширина, ни высота, ни положение - собственная проверка это подтвердила: даже blur(20px) оставил размеры и координаты элемента и его соседей пиксель-в-пиксель теми же самыми. А вот сам ЭЛЕМЕНТ filter рисует как ОДНУ готовую картинку вместе со всем его содержимым - собственная проверка (скриншот) показала, что blur() на родительском блоке одинаково размывает и его фон, и текст ВНУТРИ, хотя filter указан только на родителе, а не на самом тексте отдельно.
.card {
background: url(photo.jpg);
filter: blur(6px);
}
/* <div class="card">Подпись</div> */ - размывается и фон, и надпись "Подпись" внутри - целиком, одной картинкой.
Частое неверное ожидание - что размоется только фон:
/* filter: blur(6px) на карточке с фото И текстом,
в надежде что текст останется чётким */ - на деле текст размывается ТАК ЖЕ, как фон, потому что filter не различает "фон" и "контент" внутри одного элемента.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Считать, что порядок функций в filter не важен, раз это "просто список" | Функции применяются последовательно слева направо, поэтому один и тот же набор в другом порядке может дать другой результат | Писать функции в том порядке, который реально даёт нужный визуальный результат, и проверять глазами |
| Пытаться замылить только фон блока через filter на самом блоке | filter рисует элемент со всем содержимым как одну картинку, поэтому размывается и текст внутри тоже | Для эффекта только на фоне использовать backdrop-filter (отдельная тема одного из следующих уроков) или вынести фон в отдельный слой, например псевдоэлемент ::before |
| Ждать, что filter поменяет размеры или положение элемента, как изменение width или padding | filter - чисто визуальный эффект поверх готового макета, размеры и позиция элемента не меняются | Для реальных изменений макета использовать обычные CSS-свойства, а не filter |
| Не учитывать, что элемент с filter создаёт новый "контейнер" для потомков с position: fixed | Такой потомок отрисуется относительно ОТФИЛЬТРОВАННОГО предка, а не окна браузера, как обычно ведёт себя fixed | Избегать position: fixed внутри filter-контейнеров, если это не задумано специально |
Шпаргалка
| Запись | Что означает |
|---|---|
| filter: none; (по умолчанию) | Без эффектов |
| filter: blur(6px); | Одна функция фильтра |
| filter: grayscale(40%) brightness(1.1); | Несколько функций через пробел, применяются слева направо |
| Порядок функций | Реально меняет итоговый результат |
| Влияние на макет | Никакого - ширина, высота, позиция не меняются |
| Что попадает под эффект | Весь элемент целиком, вместе со всем содержимым внутри |
Коротко: отвечаем на вопросы
Можно ли размыть только фон карточки, не трогая текст внутри?
Нет - filter рисует элемент целиком вместе со всем содержимым как одну картинку, поэтому blur() на блоке с текстом внутри размывает и текст тоже (собственная проверка это подтверждает). Если нужен эффект именно на фоне, а контент должен остаться чётким, есть два реальных способа: свойство backdrop-filter, которое размывает то, что ЗА элементом, а не сам элемент (разбор будет в одном из следующих уроков курса), либо вынести фон в отдельный слой, например псевдоэлемент ::before, и применить filter только к нему.
Если фон страницы задан отдельно на body, а filter стоит только на блоке внутри - размоется ли фон body тоже?
Нет - filter действует только на тот элемент, на который его повесили, и на всё, что внутри него, а не на родителей, соседей или body. Если нужный фон нарисован на другом элементе, а не на том, где стоит filter, эффект на него не подействует - filter нужно вешать именно на тот элемент, где реально нарисовано то, что должно измениться.
