CSS свойство mask-composite

Определение и использование

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

Пример

Показать mask-composite Различные значения свойств:

.masked {
  width: 200px;
  height: 200px;
  mask-repeat: no-repeat;
  mask-size: 100%;
  background: blue;
  -webkit-mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
  mask-image: url(img_rectangle.svg), radial-gradient(transparent 50%, black);
}
.mask1 {
  mask-composite: add;
}
.mask2 {
  mask-composite: subtract;
}
.mask3 {
  mask-composite: intersect;
}
.mask4 {
  mask-composite: exclude;
}

Попробуйте сами

CSS синтаксис

mask-composite: add|subtract|intersect|exclude|initial|inherit;

Значение атрибута

Значение Описание
добавить Часть, находящаяся над целевой маской, источника.
subtract Часть, находящаяся вне целевой маски, источника.
intersect Часть, перекрывающаяся между источником и целевой маской, заменяет целевую маску.
exclude Область, не перекрывающаяся между источником и целевой маской, объединяется.
initial Установить этот атрибут в его значение по умолчанию. См. также initial.
inherit Этот атрибут наследуется от родительского элемента. См. также inherit.

Технические детали

Значение по умолчанию: добавить
Ингеритация: Нет
Создание анимации: Не поддерживается. См. также:Свойства анимации.
Версия: Модуль маскирования CSS уровня 1
JavaScript синтаксис: object.style.maskComposite="intersect"

Поддержка браузеров

Числа в таблице указывают на версию браузера, которая首个完全支持该属性。

Кроме Эдж Фаерфокс Сафари Опера
120 120 53 15.4 106

Related pages

Tutorial:CSS masking

Reference:CSS свойство mask

Reference:CSS свойство mask-clip

Reference:CSS свойство mask-image

Reference:CSS свойство mask-mode

Reference:CSS свойство mask-origin

Reference:CSS свойство mask-position

Reference:CSS свойство mask-repeat

Reference:CSS свойство mask-size

Reference:CSS свойство mask-type