isolation: isolate. Без него слой смешался бы со всей страницей, а не с картинкой внутри карточки, — и режим «сработал бы не там, где надо». На главную
CSS-эффекты и графика
Режимы наложения
Все шестнадцать режимов CSS на одной паре «картинка плюс цвет»: сетка для сравнения, крупное превью выбранного режима и объяснение, что каждый из них делает с пикселями.
Что смешиваем
Элемент смешивается с тем, что лежит под ним на странице.
Крупно: multiply
Каналы перемножаются: белый прозрачен, чёрный съедает всё. Так рисуют тени и печать по бумаге.
Группа: Затемняющие
У родителя стоит
Все шестнадцать режимов
CSS
.blend-wrap {
position: relative;
isolation: isolate;
}
.blend-layer {
background-color: #f97316;
mix-blend-mode: multiply;
}Чем режимы отличаются
Без смешивания
normal— Верхний слой просто закрывает нижний. Значение по умолчанию.
Затемняющие
multiply— Каналы перемножаются: белый прозрачен, чёрный съедает всё. Так рисуют тени и печать по бумаге.darken— В каждом канале берётся меньшее из двух значений. Светлые места верхнего слоя исчезают.color-burn— Усиленное затемнение с ростом контраста: тени уходят в чистый чёрный.
Осветляющие
screen— Противоположность multiply: чёрный прозрачен. Так складывают свет, блики и дым.lighten— В каждом канале берётся большее из двух значений. Тёмные места верхнего слоя исчезают.color-dodge— Усиленное осветление: света выбиваются в белый, получаются вспышки и засветы.
Контрастные
overlay— Тёмное умножается, светлое экранируется. Контраст растёт, тон задаёт нижний слой.hard-light— То же, что overlay, но роли слоёв меняются местами: тон задаёт верхний.soft-light— Мягкий вариант overlay — как рассеянный свет, без резких переходов.
Сравнивающие
difference— Модуль разности каналов. Одинаковые пиксели дают чёрный — удобно искать различия картинок.exclusion— Как difference, но с меньшим контрастом в средних тонах.
Составные
hue— Берёт тон верхнего слоя, насыщенность и светлоту — нижнего.saturation— Берёт насыщенность верхнего слоя. Серый верхний слой обесцвечивает картинку.color— Тон и насыщенность сверху, светлота снизу — классическая раскраска чёрно-белого фото.luminosity— Светлота сверху, цвет снизу — обратная раскраска.