mask-composite CSS

Свойство mask-composite задает операцию компоновки, используемую на текущем слое маски, со слоями маски ниже.

Значение по умолчанию:

add

Наследуется:
Нет
Применяется:

ко всем элементам

Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-masks? Data on support for the css-masks feature across the major browsers from caniuse.com.

WebKit и Blink имеют свойство -webkit-mask-composite, которое имеет другие ключевые слова.

Синтаксис

/* Keyword values */
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

/* Global values */
mask-composite: inherit;
mask-composite: initial;
mask-composite: unset;

Значения

Одно или несколько ключевых слов, перечисленных ниже, разделенных запятыми. Для композиции текущий слой маски называется “источник”, а все слои ниже него называются “адресатом”.

  • add — Источник размещается над адресатом.
  • subtract — Отображается только части источника за пределами адресата.
  • intersect — Отображается источник только на пересечении источника и адресата.
  • exclude — Отображается комбинация из непересекающихся частей источника и адресата.

Примеры

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
              url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-size: 100% 100%;
  mask-composite: add; /* Can be changed in the live sample */
}