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;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
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 */
}