Белый логотип на любой фотографии: чем полезны режимы смешивания CSS и где они подводят

Редакторская вёрстка устроена так, что фотографию в герой-блок выбирает не тот, кто рисовал макет. Дизайнер положил белый логотип на тёмное небо — красиво. Через неделю в ту же карточку заезжает снимок заснеженного поля, и логотипа на нём попросту нет. Обычно спасаются полупрозрачной чёрной плашкой поверх картинки: приём честный, но фотография после него превращается в серый прямоугольник, а выбирали её ради чего-то другого.

Альтернатива — перестать трогать фон и научить текст подстраиваться под то, что под ним оказалось. Ровно для этого в CSS есть свойство mix-blend-mode. Задачу, под которую обычно пишут скрипт с разбором яркости изображения, оно закрывает одной строкой.

Решение в две строки и откуда оно взялось

Формулировку, с которой чаще всего и начинают знакомство с темой, дал Cody Lindsay Gordon: логотипу назначается mix-blend-mode: exclusion, дальше он подстраивается под яркость снимка сам.

.blend-me {
  mix-blend-mode: exclusion;
}

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

<h1 class="blend-me">Hello world</h1>
<figure>
  <img src="/hero.jpg" alt="">
</figure>

Что при этом считает браузер

За смешиванием стоит поканальная функция двух аргументов. Первый — цвет подложки, в спецификации он обозначен как Cb (backdrop). Второй — цвет накладываемого слоя, Cs (source). Значения нормализованы к отрезку от 0 до 1, а сама функция применяется к красному, зелёному и синему по отдельности. По такой схеме работают двенадцать режимов из шестнадцати; их называют разделяемыми (separable) — каналы друг на друга не влияют. У normal считать нечего (побеждает верхний цвет), формула soft-light кусочная и в ячейку не влезает, а оставшиеся десять сведены в таблицу.

Четвёрка hue, saturation, color и luminosity живёт по другим правилам — это неразделяемые режимы. Цвет в них раскладывается на тон, насыщенность и светлоту, после чего составляющие берутся из разных слоёв. У color, скажем, тон и насыщенность приходят сверху, а светлота снизу: на этом и держится раскраска чёрно-белых снимков.

Разговоры про формулы заменяет один снимок экрана. Белое слово #fff лежит поверх одной и той же картинки, отличается только значение mix-blend-mode:

Слабое место — середина шкалы

Дальше начинается неприятное. Возьмём формулу difference и подставим подложку ровно посреди диапазона: abs(0.5 − 1) = 0.5. Полученное значение совпадает с фоном, надпись растворилась. С exclusion ничего не меняется: 0.5 + 1 − 2 × 0.5 × 1 = 0.5. Контраст обнуляется у обоих режимов именно на средне-серых участках — самой распространённой яркости у настоящих фотографий.

Вывод получается практический: смешивание хорошо себя ведёт на крупной декоративной типографике, монограммах, цифрах, разделителях и состояниях наведения — там, где просевшая читаемость не рушит сценарий. Подписям, кнопкам и абзацам нужна подложка с предсказуемым поведением.

Контекст наложения: элемент смешивается не со всей страницей

«У меня всё то же самое, только не работает» — самая частая жалоба, и причина у неё почти всегда одна. Смешивание захватывает не всё, что нарисовано ниже, а исключительно содержимое ближайшего контекста наложения (stacking context). Появилась между текстом и картинкой обёртка, создающая собственный контекст, — и смешиваться стало не с чем.

Список свойств, порождающих контекст наложения, заметно длиннее, чем принято помнить: сюда попадают position: fixed и contain: paint, любой filter, любой transform, объявленный will-change, opacity со значением меньше единицы, а ещё потомок flex- или grid-контейнера, которому задан z-index не в значении auto. Порождает контекст и само свойство mix-blend-mode, прямо на том узле, где его объявили.

.hero {
  isolation: isolate;
}

Отдельного упоминания заслуживает случай, который вообще ни на что не похож. Фоновая заливка, объявленная у корневого элемента либо у body, продвигается браузером на канву окна — а канва в расчёте не участвует. Смешивать оказывается не с чем: партнёром выступает прозрачность, и на экране не меняется ровным счётом ничего. В обложке к этому материалу ошибки нет — снимок отдан внутреннему блоку-сцене, ему же прописан isolation: isolate, и уже поверх этой сцены лежит заголовок с difference.

Соседнее свойство background-blend-mode

Названия похожи, области действия — нет. Там, где mix-blend-mode смешивает элемент с нарисованным под ним, background-blend-mode работает внутри одного элемента: между собой смешиваются несколько background-image и лежащий под ними background-color. Дополнительные обёртки и псевдоэлементы ради затемнения становятся не нужны.

Дуотон умещается в четыре строки:

.duotone {
  background-image: linear-gradient(135deg, #ff2d6f, #00d4ff), url("/hero.jpg");
  background-blend-mode: color;
  background-size: cover;
  background-position: center;
}

Тон и насыщенность отдаёт верхний слой, светлоту — нижний, и вся лента обложек приходит к единой стилистике. Слои в background-image перечисляются сверху вниз, поэтому градиент стоит первым, а фотография последней.

.hero {
  background-image: url("/hero.jpg");
  background-color: #1b2440;
  background-blend-mode: multiply;
  background-size: cover;
}

Шпаргалка: режим под задачу

Сборка для боевого проекта

Схема, которая выдерживает произвольный контент: предсказуемая подложка в основании, смешивание сверху как улучшение, проверка поддержки через @supports.

.hero {
  position: relative;
  isolation: isolate;
  background: url("/hero.jpg") center / cover;
}

/* база: работает всегда */
.hero__title {
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.75);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55), transparent 60%);
}

/* улучшение: только для крупного декоративного заголовка */
@supports (mix-blend-mode: difference) {
  .hero__logo {
    mix-blend-mode: difference;
    color: #fff;
  }
}

Инверсия достаётся логотипу автоматически, а текст, обязанный читаться, держится на градиентной подложке и тени — их контраст считается заранее и проверяется любым чекером. Готовый герой-блок стоит прогнать минимум на четырёх изображениях: очень тёмном, очень светлом, средне-сером и пёстром. Больше всего провалов ловит именно средне-серое.

Источники

• MDN: mix-blend-mode — список значений, формальный синтаксис, заметка о контексте наложения
• MDN: blend-mode — описание каждого из шестнадцати режимов
• MDN: isolation — значения и статус поддержки
• W3C, Compositing and Blending Level 1 — формулы разделяемых режимов и определение изолированной группы
• Cody Lindsay Gordon, Contrast Logos & Text with Background Photos Using CSS Blend Modes — исходная идея с exclusion и требование к порядку элементов