MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

mix-blend-mode

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

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

Синтаксис

/* Ключевые слова */
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>
Is a <blend-mode> denoting the blending mode that should be applied. There can be several values, separated by commas.

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

<blend-mode>

Примеры

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>
circle { mix-blend-mode: screen; }

Результат

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

Спецификация Статус Комментарий
{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }} Кандидат в рекомендации Первоначальное определение

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

Особеннность 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) ? Нет Нет

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

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

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