mask-composite

Базовая версия 2023

Новое

С декабря 2023 года эта функция работает на последних версиях устройств и браузеров. Возможны проблемы совместимости со старыми устройствами и браузерами.

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

Синтаксис

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

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

Одно или несколько ключевых слов из списка ниже, разделенные запятыми.

Значения

Для композиции текущий слой маски называется источником, а все слои ниже него — назначением.

add: Источник накладывается поверх назначения.
subtract: Источник накладывается там, где он выходит за пределы назначения.
intersect: Части источника, которые перекрывают назначение, заменяют назначение.
exclude: Неперекрывающиеся области источника и назначения объединяются.

Формальное определение

Начальное значение	`add`
Применимо к	всем элементам; в SVG применяется к контейнерным элементам, за исключением элемента `<defs>` и всех графических элементов
Наследуется	нет
Вычисляемое значение	как указано
Тип анимации	дискретный

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

mask-composite = 
  <compositing-operator>#  

<compositing-operator> = 
  add        |
  subtract   |
  intersect  |
  exclude

Примеры

Композиция слоёв масок с добавлением

<div class="masked"></div>

.masked {
  width: 100px;
  height: 100px;
  background-color: red;

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mdn.svg),
    url(https://mdn.github.io/shared-assets/images/examples/mask-star.svg);
  mask-size: 100% 100%;
  mask-composite: subtract;
}

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

Спецификация
CSS Masking Module Level 1 # the-mask-composite

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mask-composite`	120 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	120 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами. 18–79	5353	106 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	15.4 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	120 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	5353	80 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	15.4 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	25.0 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.	120 См. также `-webkit-mask-composite` для похожей нестандартной функции с другими ключевыми словами.
`add`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`exclude`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`intersect`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`subtract`	120	120	53	106	15.4	120	53	80	15.4	25.0	120

См. также

Обрезка и маскирование в CSS

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite