Режим смешивания

Режимы смешивания пришли из графических редакторов: дизайнер, привыкший к слоям в Photoshop или Figma, найдёт в CSS знакомые названия — multiply, screen, overlay, darken, lighten, difference, luminosity и другие. Каждый режим — формула, которая берёт цвет верхнего слоя и цвет нижнего и вычисляет итоговый пиксель. Например, multiply перемножает значения: белое становится как бы прозрачным, а тёмное затемняет то, что под ним. screen действует наоборот — исчезает чёрное, а светлое осветляет.

Два свойства для двух задач

• mix-blend-mode смешивает весь элемент с тем, что под ним на странице: текст с фотографией, картинку с фоном блока.
• background-blend-mode смешивает фоновые слои одного элемента между собой: несколько картинок, градиент и цвет фона. Остальная страница не затрагивается.

Пример: логотипы партнёров и тонированное фото

Логотипы прислали в JPEG с белым фоном, а блок на сайте светло-серый. Вместо перерисовки каждого файла:

.partners {
  background: #eef1f6;
  isolation: isolate;          /* смешивать только внутри блока */
}
.partners img {
  mix-blend-mode: multiply;    /* белый фон картинок исчезает */
}
.hero {
  background: url("team.jpg") center / cover, #1c3d7a;
  background-blend-mode: luminosity; /* фото в фирменном цвете */
}

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

Когда не стоит использовать

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