mix-blend-mode: смешивание слоя с задним фоном
Mix-blend-mode задаёт способ смешивания цветов элемента с содержимым позади него. В отличие от обычной прозрачности результат зависит от цветов обоих слоёв.
Назначение
Mix-blend-mode задаёт способ смешивания цветов элемента с содержимым позади него. В отличие от обычной прозрачности результат зависит от цветов обоих слоёв.
Как это работает
Multiply затемняет сочетание цветовых компонентов, screen обычно осветляет. Isolation:isolate у контейнера помогает ограничить смешивание локальной группой, чтобы соседнее оформление страницы не меняло результат неожиданно.
Пример
<style>.blend-demo{isolation:isolate;padding:1rem;background:linear-gradient(90deg,#f4db97,#8fc5ae)}.blend-demo .ink{display:inline-block;background:#b8d7ed;color:#102c42;padding:1rem;mix-blend-mode:multiply}</style>
<div class="blend-demo"><span class="ink">Цветовой образец</span></div>Что должно получиться
Цвет образца зависит от участка градиента под ним. Изолированный контейнер позволяет исследовать эффект внутри небольшой области, не распространяя опыт на всю страницу.
Граница применения и частая ошибка
Режим смешивания не гарантирует контраст текста на произвольном фоне. Не применяйте его к важным подписям без проверки всех состояний. Контексты наложения и прозрачность родителей способны заметно изменить итог.
Самостоятельная проверка
Сравните normal, multiply и screen, затем замените фон однотонным. Запишите, почему один и тот же цвет элемента выглядит по-разному. Проверьте, что после удаления эффекта содержание остаётся понятным.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.