Свойство CSS `mask-mode`

Свойство 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 может принимать несколько разделенных запятыми ключевых значений <masking-mode>, в том числе:

alpha

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

luminance

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

match-source

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

• Если свойство mask-image ссылается на SVG-элемент <mask>, используется значение его свойства mask-type или его атрибут mask-type, если он задан. Если ни одно из значений не задано явно, по умолчанию используется luminance.
• Если источником изображения маски является <image> или <gradient>, используются значения alpha изображения маски.

Описание

Маска передает элементу, к которому она применяется, свою прозрачность, а в зависимости от типа маски — также яркость. Если маска имеет тип <image>, по умолчанию значения альфа-канала изображения маски определяют видимость каждой части элемента, к которому применяется маска: там, где маска непрозрачна, соответствующая часть элемента видна; там, где маска полупрозрачна, элемент также становится полупрозрачным, а эти его области скрываются. Такое поведение используется по умолчанию для масок <image>, если свойство mask-mode задано или по умолчанию имеет значение match-source. Оно также всегда применяется, когда свойству mask-mode явно задано значение alpha.

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

В случае масок luminance видимость элемента зависит как от непрозрачности маски, так и от светлоты цвета ее непрозрачных областей. Непрозрачные белые области (яркость 100%, alpha = 1) будут видимы, а черные области (яркость 0%, alpha = 0) будут обрезаны. Области с промежуточными между белым и черным цветами и частичной непрозрачностью будут отображаться частично, с учетом яркости и прозрачности альфа-канала каждого цвета, составляющего маску.

Непрозрачность маски luminance определяется значениями R, G, B и A цвета rgb() по формуле:

((0.2125 * R) + (0.7154 * G) + (0.0721 * B)) * A

Например, цвет green — это #008000 или rgb(0% 50% 0% / 1). В маске luminance любая область, замаскированная сплошной маской green, будет 35.77% непрозрачной. Если для этой маски mask-mode задано значение alpha, поскольку green — полностью непрозрачный цвет, замаскированная область будет 100% непрозрачной.

Несколько значений

Каждое значение mask-mode представляет собой список значений, разделенных запятыми. Если указано несколько значений, каждое из них соответствует слою маски в той же позиции в свойстве mask-image. Значения определяют, будут ли связанные с ними изображения масок считаться масками luminance или alpha.

Понимание match-source

В случае match-source выбор между luminance и alpha зависит от режима маски ее источника. Если значение свойства mask-image является ссылкой на SVG-элемент <mask>, используется значение свойства <mask> элемента mask-type. Если для элемента <mask> не задано свойство CSS mask-type, используется значение атрибута mask-type элемента <mask>, если он задан и поддерживается. Если ни одно из значений не задано явно, по умолчанию используется luminance; однако это относится только к случаю, когда источником маски является элемент <mask>. В противном случае, как отмечалось ранее, если источником изображения маски является <image>, а не SVG <mask>, используются значения alpha изображения слоя маски.

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

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

mask-mode = 
  <masking-mode>#

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

Примеры

Использование и значения

В этом примере демонстрируется базовое использование свойства mask-mode и его различные значения.

HTML

Мы добавили три элемента <div>, чтобы продемонстрировать три перечисленных ключевых значения mask-mode.

<div class="alpha">ALPHA</div>
<div class="luminance">LUMINANCE</div>
<div class="matchSource">MATCH-SOURCE</div>

CSS

Для каждого <div> заданы одинаковые фон и изображение маски. Единственное различие между элементами <div> — значение свойства mask-mode:

div {
  background: blue linear-gradient(red, blue);
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mdn.svg");
}

.alpha {
  mask-mode: alpha;
}

.luminance {
  mask-mode: luminance;
}

.matchSource {
  mask-mode: match-source;
}

div {
  width: 227px;
  height: 200px;
  float: left;
  text-align: center;
  line-height: 65px;
  color: white;
  text-shadow: 1px 1px 2px black;
  font-family: sans-serif;
}

Результаты

Поскольку источником маски является <image>, а не SVG-элемент <mask>, значение match-source разрешается в alpha.

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

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

См. также

• mask-type
• mask-image
• mask — сокращенное свойство
• Введение в маскирование CSS
• Свойства маскирования CSS mask
• Объявление нескольких масок
• Модуль маскирования CSS