От автора: вы можете легко применить в CSS фильтры изображений и других элементов с помощью свойства filter. Но что, если вы хотите применить фильтр только к фону элемента? Это довольно сложно.
Существуют свойства CSS, специфичные для фона, например background-blend-mode, но смешивание и фильтры — это не одно и то же. Это похоже на то, что у нас есть backdrop-filter, но не совсем. Это выполняет фильтрацию, поскольку фон взаимодействует с тем, что находится за элементом.
К сожалению, background-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;
}Посмотрите, как «фон» фильтруется в grayscale? Мы вызвали grayscale и применили его только к псевдо-элементу, оставив остальную часть содержимого нефильтрованной.
Все зависит от того, какой фильтр вы хотите применить… вы могли бы имитировать его с помощью режимов смешивания
Я столкнулся с этой проблемой, поскольку специально пытался задать оттенки серого для фонового изображения элемента. Поскольку, как мы уже поняли, для этого нет конкретного свойства, я подумал о background-blend-mode, особенно о том, какие существуют варианты смешивания для таких вещей, как насыщенность и цвет. Если бы я мог установить чистый черный поверх графики, тогда я мог бы смешать их, как это делается для нескольких фонов — и, по сути, я имитировал бы эффект оттенков серого.
Обратите внимание, что при работе с несколькими фонами вы не можете использовать сплошной цвет сам по себе (это будет фоновый цвет, а не фоновое изображение), поэтому мы должны использовать линейный градиент без перехода.
.module { background-image: linear-gradient(black, black), url(image-to-be-fake-filters.jpg); background-size: cover; background-blend-mode: saturation;
}Исследования Дэна Уилсона
Дэн плотно занялся этим вопросом и сделал Pen, в котором есть три слоя:
Верхний слой: виньетка с radial-gradient
Средний слой: сплошной цвет
Нижний слой: графический рисунок
Вы можете настроить цвета, используемые для двух верхних слоев, и применить различные режимы смешивания к каждому из них. Это была еще одна вещь, которую я узнал! Так же, как вы можете через запятую использовать несколько фонов (а также для background-size, background-position и т. д., чтобы применить эти значения к конкретным фонам), вы также можете через запятую использовать background-blend-mode, чтобы применить различные эффекты смешивания к каждому слою.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.