mask-mode

Baseline 2023

Новое

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

Свойство mask-mode CSS устанавливает, обрабатывается ли ссылка маски, определённая mask-image, как маска яркости или альфа-маска.

Синтаксис

/* Keyword values */
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/* Multiple values */
mask-mode: alpha, match-source;

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

Свойство mask-mode задаётся одним или несколькими ключевыми значениями, перечисленными ниже, разделёнными запятыми.

Значения

alpha

Это ключевое слово указывает, что значения прозрачности (альфа-канала) изображения слоя маски должны использоваться в качестве значений маски.

luminance

Это ключевое слово указывает, что значения яркости изображения слоя маски должны использоваться в качестве значений маски.

match-source

Если свойство mask-image имеет тип <mask-source>, значения яркости изображения слоя маски должны использоваться в качестве значений маски.

Если оно имеет тип <image>, значения альфа-канала изображения слоя маски должны использоваться в качестве значений маски.

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

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

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

mask-mode = 
  <masking-mode>#  

<masking-mode> = 
  alpha         |
  luminance     |
  match-source

Примеры

Использование режима альфа-маски

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

.masked {
  width: 227px;
  height: 200px;
  background: blue linear-gradient(red, blue);

  mask-image: url(https://mdn.github.io/shared-assets/images/examples/mdn.svg);
  mask-mode: alpha;
}

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`mask-mode`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`alpha`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`luminance`	120	120	53	106	15.4	120	53	80	15.4	25.0	120
`match-source`	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-mode