MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Описание

CSS свойство mix-blend-mode опреляет режим смешивания цветов выбранного элемента с низлежащими слоями.

Начальное значениеnormal
Применяется квсе элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой
Создаёт контекст наложенияда

Синтаксис

/* Ключевые слова */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

/* Глобальные значения */
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

Значения

<blend-mode>
Собственно режим смешивания. Может быть задано несколько значений через запятую.

Формальный синтаксис

<blend-mode>

где
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Примеры

<svg>
  <circle cx="40" cy="40" r="40" fill="cyan"/>
  <circle cx="80" cy="40" r="40" fill="magenta"/>
  <circle cx="60" cy="80" r="40" fill="yellow"/>
</svg>
circle { mix-blend-mode: multiply; }

Результат

Спецификации

Спецификация Статус Комментарий
Compositing and Blending Level 1
Определение 'mix-blend-mode' в этой спецификации.
Кандидат в рекомендации Первоначальное определение

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Особеннность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка

41.0

32.0 (32.0) ? (Да) 8.0
SVG Нет 32.0 (32.0) ? Нет Нет
Особеннность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка

41.0

32.0 (32.0) ? ? 8.0
SVG Нет 32.0 (32.0) ? Нет Нет

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: bbars, andreww2012
 Обновлялась последний раз: bbars,