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

Свойство mask-type CSS применяется к элементу SVG <mask>. Оно определяет, использовать ли в содержимом маски яркость или альфа-канал (прозрачность). Это свойство может быть переопределено свойством mask-mode. Свойство mask-type не влияет на маски-изображения и маски-градиенты.

Синтаксис

/* Keyword values */
mask-type: luminance;
mask-type: alpha;

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

Значения

alpha

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

luminance

Указывает, что следует использовать значения яркости элемента <mask>.

Описание

Свойство mask-type имеет значение только для элемента SVG <mask>. Если задать mask-type: luminance, маска будет использовать яркость каждой её части; если задать mask-type: alpha, она будет использовать прозрачность каждой части маски.

Поведение по умолчанию

По умолчанию элемент SVG <mask> использует mask-type: luminance. Это означает, что на маскирование влияют и цвет, и прозрачность содержимого маски. Непрозрачность маски частично зависит от светлоты цвета непрозрачных областей:

• Полностью непрозрачные белые области (яркость 100%) будут отображены маской и станут видимыми.
• Чёрные области (яркость 0%) или полностью прозрачные области будут обрезаны и станут невидимыми.
• Области с промежуточными значениями яркости будут частично отображены маской с учётом яркости цвета маски и альфа-прозрачности каждой области.

Яркость

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

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

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

Если для элемента SVG <mask> задано значение fill="rgb(0 0 0 / 0.5)", то есть 50% прозрачный чёрный цвет, соответствующая фигура на замаскированном элементе будет отображаться с непрозрачностью 50%, когда для mask-type задано значение alpha, поскольку значение альфа-канала равно 0.5 (непрозрачность 50%). Но если для mask-type используется значение по умолчанию или задано значение luminance, замаскированная область будет полностью обрезана и станет невидимой, поскольку её яркость равна 0.

Влияние mask-mode на mask-type

Свойство mask-type задаётся для элемента SVG <mask>, а свойство mask-mode — для маскируемого элемента (элемента, к которому применяется маска). Если источник изображения маски не является элементом SVG <mask>, это свойство не оказывает эффекта.

Значение свойства mask-mode по умолчанию — match-source, то есть браузер использует значение mask-type из элемента <mask>, чтобы определить, как его интерпретировать. Если для mask-mode задано значение, отличное от match-source, оно имеет приоритет и переопределяет значение mask-type применённой маски.

Если в качестве источника изображения маски указан <mask>, а для mask-mode задано значение match-source или используется это значение по умолчанию, значение mask-mode будет определяться значением mask-type элемента <mask>: luminance или alpha. Если значение не задано явно, используется luminance.

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

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

mask-type = 
  luminance |
  alpha

Примеры

Использование свойства mask-type

В этом примере показано, как использовать свойство mask-type и как влияют его различные значения.

HTML

Мы добавили два изображения, к которым будет применена маска. Кроме имён классов, эти изображения идентичны. Мы также добавили SVG с двумя элементами <mask>. Кроме значений id, эти маски тоже идентичны: каждая содержит зелёную и белую фигуры в форме сердца, а также круг с полупрозрачной бело-чёрной заливкой.

<img
  class="alphaMaskType"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />
<img
  class="luminanceMaskType"
  src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
  alt="Pride flag" />

<svg height="0" width="0">
  <mask id="alphaMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
    <circle
      cx="170"
      cy="170"
      r="40"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
  <mask id="luminanceMask">
    <path
      d="M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
      fill="green"
      stroke="white"
      stroke-width="20" />
    <circle
      cx="170"
      cy="170"
      r="40"
      fill="rgb(0 0 0 / 0.5)"
      stroke="rgb(255 255 255 / 0.5)"
      stroke-width="20" />
  </mask>
</svg>

CSS

Мы применяем свойство mask-type к элементам <mask>, а затем задаём для изображений элементы <mask> и источник маски.

mask#alphaMask {
  mask-type: alpha;
}

mask#luminanceMask {
  mask-type: luminance;
}

img.alphaMaskType {
  mask-image: url("#alphaMask");
}

img.luminanceMaskType {
  mask-image: url("#luminanceMask");
}

Результат

Поскольку значение свойства mask-mode по умолчанию — match-source, в первой маске для её определения используются только альфа-каналы: белый и зелёный цвета полностью непрозрачны, а белый и чёрный цвета с прозрачностью 50% имеют непрозрачность 50%, поскольку учитывается только значение альфа-канала. Во втором примере для определения непрозрачности маски используется яркость цветов: белый цвет ярче зелёного, а полупрозрачный белый — полупрозрачного чёрного.

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

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

См. также

• mask
• mask-mode
• Введение в маскирование CSS
• Модуль маскирования CSS
• Атрибут SVG mask-type