mask-composite¶

Свойство 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: Отображается комбинация из непересекающихся частей источника и адресата.

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

mask-composite: add;

Применяется ко всем элементам

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

CSS Masking Module Level 1

Поддержка браузерами¶

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, которое имеет другие ключевые слова.

Описание и примеры¶

#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 */
}