mask-type

Baseline Широко поддерживается

Эта функция хорошо отработана и работает во многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Это свойство может быть переопределено свойством mask-mode, которое имеет тот же эффект, но применяется к элементу, где используется маска. Маски альфа-канала, как правило, быстрее отрисовываются.

Синтаксис

/* 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;

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

Значения

luminance: Ключевое слово, указывающее, что связанное изображение маски является маской яркости, то есть, что его значения относительной яркости должны использоваться при ее применении.
alpha: Ключевое слово, указывающее, что связанное изображение маски является маской альфа-канала, то есть, что его значения альфа-канала должны использоваться при ее применении.

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

Начальное значение	`luminance`
Применимо к	`<mask>` элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

mask-type = 
  luminance  |
  alpha

Примеры

Установка маски альфа-канала

HTML

<section>
  <div class="red-square"></div>
</section>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: alpha;
}

Результат

Установка маски яркости

HTML

<section>
  <div class="red-square"></div>
</section>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="0"
  height="0">
  <defs>
    <mask id="m" maskContentUnits="objectBoundingBox">
      <rect
        x=".2"
        y=".1"
        width=".4"
        height=".8"
        fill="yellow"
        fill-opacity="0.7" />
    </mask>
  </defs>
</svg>

CSS

* {
  margin: 0px;
  padding: 0px;
}

section {
  width: fit-content;
  border: 1px solid blue;
}

.red-square {
  height: 100px;
  width: 100px;
  background-color: red;
  border: solid 1px black;
  mask: url("#m");
}

mask {
  mask-type: luminance;
}

Результат

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`mask-type`	24	79	35	15	7	25	35	14	7	1.5	4.4
`alpha`	24	79	35	15	7	25	35	14	7	1.5	4.4
`luminance`	24	79	35	15	7	25	35	14	7	1.5	4.4

См. также

Другие свойства, относящиеся к маскам: mask, mask-mode

© 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-type