background-blend-mode: смешивание фоновых слоёв одного элемента
Background-blend-mode управляет смешиванием фоновых изображений и фонового цвета внутри элемента. Текст и обычные потомки не становятся самостоятельными фоновыми слоями.
Назначение
Background-blend-mode управляет смешиванием фоновых изображений и фонового цвета внутри элемента. Текст и обычные потомки не становятся самостоятельными фоновыми слоями.
Как это работает
Каждому изображению можно сопоставить режим в списке через запятую. Смешивание происходит в пределах фона элемента; это другая задача, чем взаимодействие всего элемента с окружающими слоями через mix-blend-mode.
Пример
<style>.cover{background-color:#b9dbc8;background-image:linear-gradient(120deg,#224b73,transparent);background-blend-mode:multiply;padding:2rem}.cover span{display:inline-block;background:white;color:#183527;padding:.7rem}</style>
<div class="cover"><span>Подпись на непрозрачной подложке</span></div>Что должно получиться
Градиент смешивается с фоновым цветом, а белая подложка подписи остаётся обычным дочерним элементом. Так можно отдельно настраивать декоративный фон и читаемость текста.
Граница применения и частая ошибка
Не ждите эффекта между двумя независимыми соседними элементами. Если фоновых слоёв несколько, проверьте соответствие порядка изображений и режимов. В печати фон может не выводиться, поэтому смысл не должен зависеть от него.
Самостоятельная проверка
Добавьте второе фоновое изображение в виде градиента и задайте два разных режима. Временно отключайте слои по одному. Убедитесь, что можете объяснить вклад каждого слоя, а не только подобрать понравившийся цвет.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.