С помощью свойства фильтра можно довольно легко наложить фильтр на целый элемент. Но что делать, если нужно применить фильтр только к фоновому изображению элемента? Сделать это весьма непросто. Существуют свойства CSS, которые предназначены специально для фоновых изображений, такие как background-blend-mode, но режимы наложения и фильтры — не одно и то же. Создается впечатление, что для этой цели существует свойство backdrop-filter, но это не так, оно влияет на то, как содержимое элемента взаимодействует с фоновым изображением.

Специального свойства фильтра для фонового изображения не существует. Так какие же есть способы создания подобного эффекта?

Использование псевдоэлемента вместо фона

Если положить содержимое элемента в другой элемент, можно задать этому внешнему элементу псевдоэлемент, который будет создавать видимость фона:

.module {
  position: relative;
}
.module::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(graphic-to-be-filtered.jpg);
  filter: grayscale(100%);
}
.module-inside {
  /* Благодаря этому элемент окажется поверх псевдоэлемента ::before */
  position: relative;
}

Обратите внимание, изображение стало черно-белым. Черно-белый фильтр применяется только к псевдоэлементу, а остальное содержимое остается неизменным.

В зависимости от того, какой именно фильтр нужен, может оказаться возможным создать подобный эффект с помощью режимов наложения. 

Если нужно сделать фоновое изображение элемента черно-белым, как мы уже рассказали выше, не существует подходящего свойства, но мы подумали о режимах наложения и об их возможностях изменять такие параметры, как насыщенность и цвет. Если задать полностью черный цвет поверх изображения, то их можно было бы наложить друг на друга как множественные фоновые изображения и создать эффект, похожий на эффект черно-белого фильтра.

Обратите внимание, нельзя использовать просто полностью черный цвет как одно из изображений для свойства множественных фоновых изображений, так как это будет цвет фона, а не фоновое изображение, так что нам нужно создать черное фоновое изображение с помощью линейного градиента без переходов:

.module {
  background-image:
    linear-gradient(black, black),
    url(image-to-be-fake-filters.jpg);
  background-size: cover;
  background-blend-mode: saturation;
}

Пример для подбора цветов

Существует интересный пример с тремя слоями:

• Верхний слой: виньетка из радиального градиента
• Средний слой: сплошной цвет
• Нижний слой: изображение

Можно поэкспериментировать с цветами верхних двух слоев и применить к каждому из ним разные режимы наложения. Таким же образом, как можно через запятую указывать множественные фоновые изображения, а также размеры и расположения фоновых изображений и другие подобные значения для применения к определенным фоновым изображениям, можно указывать, разделяя запятой, и разные режимы наложения фоновых изображений для применения разных эффектов наложения к каждому слою:

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Использование цветовых схем CSS
• Элементы взаимодействия с пользователем с использованием переходов
• Интересное оформление для элемента цитаты с использованием CSS